事件高级2

1 阻止事件冒泡：

8ec1b13621a9b2bf8cf4e4d7dfc175db.png

此时有这么一个需求，点击内层的div使该div的背景色变黄，点击外层的div或屏幕的其他地方，使内层div的背景色恢复红色，实现代码如下：

div2.onclick = function(e){

   e.target.style.backgroundColor='yellow'

 }

当只给内层div绑定事件的时候，可以使背景色变黄，然后加上点击外层div的事件，使内层div背景色恢复为红色

div1.onclick = function(e){

   div2.style.backgroundColor='red'

 }

此时我们可以看到，无论怎么点击，内层的div背景色都不会变黄了，这是因为事件冒泡的话，即使你只点击内层div，外层的click事件也会被触发，而他的事件逻辑是将内层div的背景色变红，这样一来，当点击内层div时，背景色变黄然后迅速又变红，我们看不到这个过程，只看到它一直是红的，所以要实现这个需求，就必须阻止事件的冒泡

• IE:window.event.cancelBubble = true;

• 非IE:e.stopPropagation();

兼容性写法:

var e = e || window.event

if(e.stopPropagation){

  e.stopPropagation()

}else{

  e.cancelBubble = true;

}

2 阻止标签默认行为 e.preventDefault()