題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級方法指定的事件處理程序被認為是元素的方法，就是將一個函數(shù)賦值給一個事件處理程序屬性（每個元素包括window和document都有自己處理程序的屬性）。例如：onclick、onmouseover、onmouseout等。因此，這時候的事件處理程序是在元素的作用域中執(zhí)行的，DOM0級事件只能覆蓋，不會連續(xù)觸發(fā)。
- DOM2級事件’定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();所有的DOM節(jié)點都包含這兩種方法。
它們都接受3個參數(shù)：要處理的事件名，事件處理程序的函數(shù)，和一個布爾值。 最后一個參數(shù)：如果為true，表示在捕獲階段調用事件處理程序，如果是false，表示在冒泡階段調用事件處理程序，DOM2級事件可以連續(xù)觸發(fā)。
題目2： attachEvent與addEventListener的區(qū)別？
- attachEvent （不支持addEventListener的舊IE瀏覽器特有）
- 只有兩個參數(shù)（函數(shù)名、）
- 只能以冒泡事件觸發(fā)
- 作用域： 全局變量 this 指向window
- 指定多個同類型事件時，執(zhí)行順序無規(guī)律（如少量方法還會按順序執(zhí)行）
- addEventListener
- 三個參數(shù)（事件類型、方法、布爾值）
- 作用域： 元素自身， this 指觸發(fā)元素
- 指定多個同類型事件時，按添加順序執(zhí)行
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
- IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
- DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
stopPropagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡。
要阻止事件的默認行為，可以使用preventDefault()方法，前提是cancelable值為true
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
var lis = document.querySelector('.ct'). querySelectorAll('li'); for (var i = 0;i<lis.length; i++) { lis[i].addEventListener('click',function() { console.log(this.innerText); }) }
var ct = document.querySelector('.ct'); ct.addEventListener('click',function(e) { console.log(e.target.innerText); })
題目6： 補全代碼，要求：
當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內容。
var content = document.querySelector('.ipt-add-content'); var start = document.querySelector('#btn-add-start'); var end = document.querySelector('#btn-add-end'); var ct = document.querySelector('.ct'); end.addEventListener('click',function(){ var li = document.createElement('li'); li.innerText = content.value; if(li.innerText !=''){ ct.appendChild(li); } }); start.addEventListener('click',function(){ var li = document.createElement('li'); li.innerText = content.value; if(li.innerText !=''){ ct.appendChild(li); } ct.insertBefore(li,ct.firstChild); }); ct.addEventListener('click',function(e){ if(e.target.tagName.toUpperCase()==='LI') console.log(e.target.innerText); });
題目7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片。
var ct = document.querySelector('.ct'); var imgPre= document.querySelector('.img-preview'); var image = document.createElement('img'); ct.addEventListener('mouseover',function(e) { var path = e.target.getAttribute('data-img'); image.setAttribute('src',path); imgPre.appendChild(image); });
