js事件委托

原文链接：http://damobing.com/?p=513

概念

事件委托也叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

优点

• 减少内存消耗：
  如果每个dom节点都绑定事件，那么会增加很多与dom的交互，同时会保存很多对象占用内存，这两者都将导致页面性能变低。而我们如果只使用一个代理，那么会减少很多dom交互和内存占用。
• 动态绑定：
  新生dom节点如果用原来的方式是无法绑定事件的，用委托的方式这方面可以轻松实现，保证父元素存在即可。

原理

利用事件冒泡，而冒泡指的就是事件从向上传递事件，如果事件有相应的函数绑定就会执行其绑定函数。

举例：ul下的li元素有绑定事件，我们通过ul绑定委托之后，委托的源码部分会在其执行函数内针对事件源进行筛选判定是否符合筛选条件（是否是li），然后针对的获取属性或者内容，进行相关的操作。从这里可以看到没有直接针对特定元素绑定事件，而是对事件源进行匹配，所以不存在新生元素无事件的问题。

//原生方法
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

使用建议

适合：click,mousedown，mouseup，keydown，keyup，keypress。
不适合：mouseover,mouseout,
没有：focus，blur

jq写法

$(par).on("click",'child',fn)

拓展：事件监听

概述

事件监听：W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
event : （必需）事件名，支持所有DOM事件。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。这里导致默认事件是事件向上冒泡的。

捕获vs冒泡

捕获阶段：父元素先触发，子元素后触发；
冒泡阶段：子元素先触发，父元素后触发。

element.addEventListener(event, function, useCapture)

优点

• 可以绑定多个事件
• 可以解除某事件

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。