事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
利用事件冒泡,而冒泡指的就是事件从向上传递事件,如果事件有相应的函数绑定就会执行其绑定函数。
举例: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
$(par).on("click",'child',fn)
事件监听:W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。 event : (必需)事件名,支持所有DOM事件。 function:(必需)指定要事件触发时执行的函数。 useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。这里导致默认事件是事件向上冒泡的。
捕获阶段:父元素先触发,子元素后触发; 冒泡阶段:子元素先触发,父元素后触发。
element.addEventListener(event, function, useCapture)