DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

DOM0 事件

Dom0級事件處理程序是將一個函數(shù)賦值給一個事件處理程序?qū)傩裕ㄟ^將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序。這種方法無法給一個事件添加多個事件處理程序,后面的程序會覆蓋前面的程序。

1.jpg

DOM2級

Dom2級定義了addEventListener()和removeEventListener()用于處理指定和刪除事件處理程序。所有Dom節(jié)點都包含這兩個方法，并且它們都接受3個參數(shù)，要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

2.jpg

3.jpg

區(qū)別

使用Dom2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序，而Dom0級為一個事件添加多個事件處理程序時，后面的程序會覆蓋前面的。

attachEvent與addEventListener的區(qū)別？

• 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
• 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
• 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，attachEvent事件處理程序會在全局變量內(nèi)運行，this是window，所以剛才例子才會返回undefined，而不是元素id
• 為一個事件添加多個事件處理程序時，執(zhí)行順序不同。addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器。

解釋IE事件冒泡和DOM2事件傳播機制？

• IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
• DOM2級事件傳播機制：事件捕獲階段，處于目標階段，事件冒泡階段
  其中冒泡和捕獲階段區(qū)別在于事件被觸發(fā)后傳播的先后順序。

4.jpg

如何阻止事件冒泡？ 如何阻止默認事件？

• 一般瀏覽器
  e.preventDefalut(); // 取消默認行為
  e.stopProgration(); // 設(shè)置之后會阻止事件進一步冒泡或捕獲
• ie瀏覽器
  e.cancleBubble = true; // 阻止冒泡
  e.returnValue = false; // 取消默認行為

有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

代碼1.jpg

代碼1答案.jpg

補全代碼，要求：

• 當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
• 當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。

代碼2答案.jpg

補全代碼

• 要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片。

代碼3.jpg

代碼3答案.jpg