Dom事件流 事件捕获 事件冒泡

事件

事件冒泡

• 事件冒泡即事件开始时，有最具体的元素接收（也就是事件发生的节点），然后逐级传播到不具体的节点
• 执行顺序 button > body > document > window

事件捕获

• 事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收事件，具体元素则最后接收事件
• 执行顺序 window > document > body > button

当然，由于时代更迭，事件冒泡方式更胜一筹，所以放心的使用事件冒泡，有特殊需要再使用事件捕获即可

DOM事件流包括三个阶段

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

阻止事件冒泡

事件冒泡过程，是可以被阻止的，防止事件冒泡而带来的不必要错误和困扰，这个方法就是：stopPropagation()

button.addEventListener('click',function(event){
    event.stopPropagation();//非ie浏览器
    event.canceBubble = true;//ie浏览器9.0之前
},false)

IE和DOM事件流的区别

1. 执行顺序不一样
2. 参数不一样
3. 事件加不加on
4. this执行问题