事件流，冒泡，捕获，事件委托

时间 2019-11-19

标签事件冒泡捕获委托栏目应用数学繁體版

原文原文链接

js里怎么去监听一个事件？node

　　网页中每个元素都有能够产生某些触发JavaScript函数的事件，事件是能够被JavaScript侦测到的一种行为函数

监听方法的参数分别表明什么意思？其中哪些参数关系到js的事件流机制？js事件流机制有哪些工做？工做原理是什么？性能

　　第一个参数是，事件类型，例如onclickspa

　　第二个参数是，响应的时候所执行的函数代理

　　第三个是事件流问题，侦听的三个阶段，捕获阶段 --- 目标阶段 --- 冒泡阶段code

　　此处的参数肯定侦听器是运行于捕获，目标仍是冒泡blog

　　若是将useCapture设置为true,则侦听器只在捕获阶段处理事件，若是设置为false，侦听器就只在目标或者冒泡阶段处理事件事件

　　若是想要三个阶段都有侦听事件，请调用两次addEventListener,一次为true，一次为falseip

　　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阻止默认事件
};

事件委托

　　定义：利用事件冒泡，只指定一个事件处理程序

　　好处：一、节省空间内存性能好，二、对于新增的内容，无需再进行事件绑定，对于动态内容尤其合适

　　缺点：若是把全部事件都用事件代理，可能会出现事件误判。即本不应被触发的事件被绑定上了事件。

<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>