1.DOM0 事件和DOM2級在事件監聽使用方式上有什么區別?
- DOM0事件是將一個函數賦值給一個事件處理程序屬性:
var btn=document.getElementById("xxx")
btn.onclick=function(){
//代碼
}
有一個缺陷就是只能處理一個程序,如果再次向同一個元素添加同一個事件,將會被最后的覆蓋。
- DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作:
- addEventListener
- removeEventListener
var btn=document.getElementById("xxx")
btn.addEventListener('click',function(){
//代碼
},true/false)
第一個參數為綁定什么事件,
第二個參數是事件發生什么,
第三個參數如果是
true表示在捕獲階段調用事件處理程序,
如果是false,則是在事件冒泡階段處理
2.attachEvent與addEventListener的區別?
1.參數個數不相同,這個最直觀,addEventListener有三個參數,attachEvent只有兩個,attachEvent添加的事件處理程序只能發生在冒泡階段,addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理(我們一般為了瀏覽器兼容性都設置為冒泡階段)
element.addEventListener("Event",function(){},true/false)
element.attachEvent("Event",function(){})
2.第一個參數意義不同,addEventListener第一個參數是事件類型(比如click,load),而attachEvent第一個參數指明的是事件處理函數名稱(onclick,onload)
3.事件處理程序的作用域不相同,addEventListener的作用域是元素本身,this是指的觸發元素,而attachEvent事件處理程序會在全局變量內運行,this是window,所以剛才例子才會返回undefined,而不是元素id
4.為一個事件添加多個事件處理程序時,執行順序不同。addEventListener 會按照添加的順序執行。 attachEvent 添加多個事件處理程序時,順序是無規律的。
3.解釋IE事件冒泡和DOM2事件傳播機制?
事件冒泡:事件開始時由最具體的元素接收,然后逐級向上傳播到較為不具體的元素
DOM事件流:DOM2級事件規定事件流包括三個階段,事件捕獲階段,處于目標階段,事件冒泡階段,首先發生的是事件捕獲,為截取事件提供機會,然后是實際目標接收事件,最后是冒泡階段;
ps:Opera、Firefox、Chrome、Safari都支持DOM事件流,IE不支持事件流,只支持事件冒泡
Paste_Image.png
4.如何阻止事件冒泡? 如何阻止默認事件?
- DOM
阻止冒泡
element.onclick=function(e){
e.stopPropagation();
}
element.addEventListener("event",function(e){
e.stopPropagation();
})
組織默認事件:
element.onclick=function(e){
e.preventDefault();
}
element.addEventListener("event",function(e){
e.preventDefault();
})
- IE
阻止冒泡:e.cancelBubble = true;
阻止默認事件:event.returnValue = false;