事件流，冒泡，捕获，事件委托
Posted xiaohaha668
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件流，冒泡，捕获，事件委托相关的知识，希望对你有一定的参考价值。
js里怎么去监听一个事件？
网页中每一个元素都有可以产生某些触发javascript函数的事件，事件是可以被JavaScript侦测到的一种行为
监听方法的参数分别代表什么意思？其中哪些参数关系到js的事件流机制？js事件流机制有哪些工作？工作原理是什么？
第一个参数是，事件类型，例如onclick
第二个参数是，响应的时候所执行的函数
第三个是事件流问题，侦听的三个阶段，捕获阶段 --- 目标阶段 --- 冒泡阶段
此处的参数确定侦听器是运行于捕获，目标还是冒泡
如果将useCapture设置为true,则侦听器只在捕获阶段处理事件，如果设置为false，侦听器就只在目标或者冒泡阶段处理事件
如果想要三个阶段都有侦听事件，请调用两次addEventListener,一次为true，一次为false
true的顺序总在false之前，如果多个为true，则外层触发多于内层，如多多个为false，则内层触发先于外层
冒泡：事件从里向外发生（目前IE6,7,8只支持冒泡流）
捕获：事件从外向里
false，阻止事件继续往下流
myBody.addEventListener("click", function() {
show(‘body<br>‘);
}, true); //若为false则是冒泡事件
事件移除
removeEventListener(type, fn, useCapture)
因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法，
IE提供了另一个函数attachEvent( type , fn )
参数：type---------事件类型，fn-------------事件处理函数，没有第三个参数
事件移除detachEvent( type , fn )
var Event=ev||window.event; if (Event.stopPropagation){ Event.stopPropagation();//非IE阻止事件传播 }else{ Event.cancelBubble=true;//IE阻止事件冒泡 }
var Event=ev||event; if (Event.preventDefault) { Event.preventDefault(); //非IE阻止默认事件 } else{ Event.returnValue=false; //IE阻止默认事件 };
事件委托
定义：利用事件冒泡，只指定一个事件处理程序
好处：1、节省空间内存性能好，2、对于新增的内容，无需再进行事件绑定，对于动态内容尤为合适
缺点：如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。
<body>
<div id="box">
<button val="add">添加</button>
<button val="del">删除</button>
<button val="select">选择</button>
</div>
</body>
<script>
var box=document.getElementById("box");
box.onclick=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if (target.nodeName.toLocaleLowerCase()==‘button‘){
var attVal=target.getAttribute(‘val‘);
switch(attVal){
case‘add‘:console.log(‘添加‘);break;
case‘del‘:console.log(‘删除‘);break;
case‘select‘:console.log(‘选择‘);break;
}
}
}
</script>
以上是关于事件流，冒泡，捕获，事件委托的主要内容，如果未能解决你的问题，请参考以下文章