事件传播机制、阻止传播、取消默认事件、事件代理

事件传播机制

事件流是原来描述事件接受的顺序，目前有三种模型：

• 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
• 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反

• DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
  其中DOM事件流即为最完整的事件传播机制

  
  

阻止传播、取消默认事件

在js中指定事件处理程序一般有如下方法（以点击事件为例）

xxx.onclick = function(){
//事件处理函数主体
}

//DOM2级事件处理程序
xxx.addEventListener('click',function(){
//事件处理函数主体
},false);

addEventListener接受的参数中最后一个为Boolean类型，默认为false，说明事件为冒泡阶段，设置为true时说明事件为捕获阶段。

删除事件处理函数
其中onclick函数的是将其赋值为null即可
addEventListener函数则为其添加removeEventListener函数，移除时参数与添加的时候相同，所以添加事件时不能使用匿名函数。
preventDefault() 取消事件默认行为
stopPropagation() 取消事件进一步捕获或冒泡

//取消btn上的默认事件
document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
}

事件代理

事件冒泡使用到了两个元素：事件冒泡和目标元素
使用事件代理就是将事件处理程序添加到一个父级元素上，等待事件通过冒泡的形式传播上来，并判断是从哪个元素开始的。