事件代理

1.事件代理

  事件代理是指在父元素上注册事件回调函数,若在父元素容器内的子元素触发了该事件,则在父元素上响应该事件。即父容器代理了在其容器内所有子元素的事件处理,优点是:1>减少了事件绑定(只需要在父容器上绑定事件);2>动态变化的DOM结构仍然可以监听(父元素可以根据event.target.tagName 判断触发事件是哪个子元素)。

2.浏览器差异

  火狐 & IE  ==>  事件捕获 & 事件冒泡 

  首先得明白父元素以及其容器内的子元素是合成绘制到页面上来的,即它们是堆叠显示的。

       事件捕获

       事件的触发从windon根节点发出,不断地经过向下传递直到目标节点。在到达目标节点的路径上所有注册过该事件的回调函数都会触发。

       事件冒泡

       事件的触发从目标节点发出,不断地通过上级节点(父节点)向上传递,在该过程中所经过的所有节点都会触发该事件,若注册过回调函数的节点,则该回调函数会执行。

3.设置事件冒泡或者捕获阶段触发

  element.addEventListener(eventType,callBack,true | false)

  第3个参数默认为false,表示事件在冒泡阶段调用事件处理函数;如果该参数为true,则表示在事件捕获阶段调用事件处理函数。事件冒泡的兼容性更好,在IE9 之前设置 element.attachEvent(eventType,callBack),在IE9之后,可以设置 element.addEventListener(eventType,callBack,true|false);

      

原文地址:https://www.cnblogs.com/wust-hy/p/7469562.html