標籤:優先 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