js addEventListener removeEventListener

來源:互聯網
上載者:User

標籤:優先   remove   cti   代碼   win   child   fat   false   事件冒泡   

addEventListener,removeEventListener

    • addEventListener()接受三個參數。
      第一個是事件類型,如click,keypress,主意沒有on,並且全是小寫。
      第二個是處理函數,有一個event參數,event包括type,target等等屬性。
      第三個是bool值,不寫是false,false為冒泡事件處理函數,true為捕獲事件處理函數。
    • removeEventListener()接受三個參數。
      第一個是事件類型,同上。
      第二個是處理函數,必須是註冊時同一個函數,傳匿名函數沒用。如addEventListener的是fun1,removeEventListener也要是fun1
      第三個同上
          var father = document.getElementById("father");    var fatherHandle = function(event) {        console.log(‘--------- father -----------‘)    }    father.addEventListener("click", fatherHandle, false);    father.removeEventListener("click", fatherHandle, false); //有效    father.removeEventListener("click", function(){console.log(‘-- no --‘)}, false); //無效
    • 能通過多次調用addEventListener為同一個對象註冊同一事件類型的多個處理函數,並且按照註冊的順序調用。
      但是使用相同參數多次註冊無效,只會註冊一次。
    • 在事件處理函數內,this指向事件目標的節點對象
    • 處理函數return false就是阻止預設操作,
      在addEventListener中事件對象的preventDefault()取消預設操作
    • 事件傳播三個階段:
      事件的捕獲:由window對象一直到觸發的內部對象
      事件處理函數:第三個參數為true為捕獲函數,false為冒泡處理函數
      事件的冒泡:由最裡面的對象向外擴散一直到根節點。
      呼叫事件對象的stopPropagation()方法阻止事件冒泡。如果在同一對象上註冊了其他函數,會繼續調用,但其他對象上就不會再執行。
      stopImmediatePropagation()阻止其他對象的傳播也阻止了同一個對象的其他函數執行。

 

    var father = document.getElementById("father");    var child = document.getElementById("child");    var fatherHandle = function(event) {        console.log(‘--------- father -----------‘)    }    var childHandle = function(event) {        console.log(‘--------- child -----------‘)    }    father.addEventListener("click", fatherHandle, true);    child.addEventListener("click", childHandle, true);    // father - child
    father.addEventListener("click", fatherHandle, false);    child.addEventListener("click", childHandle, false);    // child - father
    var fatherHandle = function(event) {        console.log(‘--------- father -----------‘)    }    var childHandle = function(event) {        console.log(‘--------- child -----------‘)        event.stopPropagation()    }

    father.addEventListener("click", fatherHandle, false);    child.addEventListener("click", childHandle, false);    child.addEventListener("click", function(e){console.log(‘haha‘)}, false);    // child haha

 

 

 

 

調用順序

    • 設定對象屬性或html屬性得註冊函數優先調用
    • addEventListener按註冊的順序調用
    • IE 的attachEvent()不按順序調用,所以代碼不應該以來調用順序

 

<body>    <h1 id="father">        father        <span id="child" onclick="fun()">child</span>    </h1><script>    var child = document.getElementById("child");    var childHandle = function(event) {        console.log(‘--------- child -----------‘)    }    child.addEventListener("click", childHandle, false);    var fun = function(e) {        console.log(‘--------- property -----------‘)    }    // property - child</script></body>

 

 

 

 

js addEventListener removeEventListener

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.