事件流，冒泡，捕獲，事件委託

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。