Js事件传播流程及事件阻止与事件委托

事件

什么是事件

HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

事件流

什么是事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件流传播流程

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。且所有现代浏览器都支持事件冒泡。（IE）

网络图片

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。（网景）

网络图片

DOM0级事件

直接通过 onclick 绑定到 html上的事件

/*或*/
input.onclick = function(){  ...  }

1）同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数；
2）不存在兼容性问题。

DOM2级事件

DOM2级事件是通过addEventListener（监听器）绑定的事件

input.addEventListener( 
    事件名, 
    处理事件函数, 
    true(捕获使用)/false(冒泡使用，默认)
)
//IE下的监听器
//attachEvent()  添加
//detachEvent()  删除

1）同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行；
2）DOM2级事件规定了事件流包含三个阶段包括：
①事件捕获（为截获事件提供机会，不会接收到事件）
②处于目标阶段（目标接受事件并冒泡，一般和冒泡阶段看作一部分）
③事件冒泡阶段

网络图片

事件阻止

阻止事件冒泡

function stopEvent (evt) {
    var evt = evt || window.event;
    if (evt.stopPropagation) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;   //IE
    }
}

阻止默认行为

• a标签的跳转；
• submit按钮的提交；
• 右键菜单；
• 文本框的输入等；

 function stopEvent (evt) {
    var evt = evt || window.event;
    if (evt.preventDefault) {
        evt.preventDefault();
    } else {
        evt.returnValue = false;  //IE
    }
}

事件冒泡案例

在ul>li结构中，原结构中li包含点击事件。若要添加新的li且要有点击事件，或者在li数量很多，为了提高效率和速度。可利用事件冒泡，通过事件委托的方式只为ul绑定点击事件完成上述功能。
事件委托：给父元素绑定事件，用来监听子元素的冒泡事件，就是利用事件冒泡处理动态元素事件绑定的方法。（因为会有冒泡的情况发生，所以当点击li会向上冒泡到ul）
优点：
提高性能：每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
动态监听：使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

    
1
    
2
    
3

var oList = document.getElementbyId("list");
oList.onclick = function(e){
    //取事件源的兼容性写法
    var evt = e || event;
    var _target = evt.target || evt.srcElement; 
    //event.target返回事件的目标节点
    if(_target.nodeName.toUpperCase() == "LI"){
        console.log("aa");
    }
}