DOM0級事件和DOM2級在事件監聽使用方式上有什么區別？
DOM0級事件
移除屬性只需將屬性置空
該方式不會做同一對象的同類型事件綁定累加，即后者覆蓋前者
事件處理程序會在事件流的冒泡階段被處理
所有的瀏覽器都支持DOM0 級事件處理程序DOM2級事件
定義了兩個方法，用來指定和刪除事件處理程序：addEventListener() 和 removeEventListener()。這兩個方法都接受3個參數：要處理的事件名、作為事件處理程序的函數、一個布爾值，這個布爾值參數如果為true表示在捕獲階段調用事件處理程序，為false表示在冒泡階段調用事件處理程序，默認設為false。通過addEventListener添加的事件處理程序只能通過removeEventListener()來移除
可以為同一個元素綁定多個事件處理程序，綁定的事件處理程序會按照它們添加的先后順序依次觸發
IE9+、Firefox、Safari、Chrome和Opera都支持DOM2 級事件處理程序
attachEvent與addEventListener的區別？
- attachEvent
IE8及以下版本使用
事件處理程序中的this指向全局對象window
要處理的事件名前需要加'on'
處理程序會在冒泡階段調用 - addEventListener
IE9+、Firefox、Safari、Chrome和Opera都支持
事件處理程序中的this引用當前元素
通過設置第三個參數為true或false可以設定在捕獲階段還是冒泡階段調用事件處理程序
解釋IE事件冒泡和DOM2事件傳播機制？
事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
DOM2級事件：首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段
如何阻止事件冒泡？ 如何阻止默認事件？
- DOM中的事件對象：
preventDefault()方法用來取消事件默認行為
stopPropagation()方法用來阻止事件進一步捕獲或冒泡
return false 退出執行, return false 之后的所有觸發事件和動作都不會被執行 - IE8及以下中的事件對象
returnValue屬性用來設置事件的默認行為。默認值為true，當設置為false時，就會取消事件的默認行為。
cancelBubble屬性用來取消事件冒泡。默認值為false，當設置為true時，就會阻止事件冒泡。
<!-- 有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容 -->
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var liNodes= document.querySelectorAll('.ct li')
var ct= document.querySelector('.ct')
ct.addEventListener('click',function(e){
var target= e.target
console.log(target.innerText)
})
</script>
<!-- 補全代碼，要求：當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內容。 -->
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</button>
<script>
var liNodes= document.querySelectorAll('.ct li')
var addS=document.querySelector('#btn-add-start')
var addE=document.querySelector('#btn-add-end')
var ct=document.querySelector('.ct')
var ipt=document.querySelector('.ipt-add-content')
ct.addEventListener('click',function(e){
var target= e.target
console.log(target.innerText)
})
addS.addEventListener('click',function(){
var text= ipt.value
if(text !=""){
var node= document.createElement('li')
node.innerText=ipt.value
ct.insertBefore(node,ct.firstChild)}
})
addE.addEventListener('click',function(){
var text= ipt.value
if(text !=""){
var node= document.createElement('li')
node.innerText=ipt.value
ct.appendChild(node)}
})
</script>
<!-- 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的data-img對應的圖片。 -->
<ul class="ct">
<li data-img="1.png">鼠標放置查看圖片1</li>
<li data-img="2.png">鼠標放置查看圖片2</li>
<li data-img="3.png">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct=document.querySelector('.ct'),
imgP=document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var dataImg=e.target.getAttribute('data-img')
imgP.innerHTML=''
})
ct.addEventListener('mouseout',function(){
imgP.innerHTML=''
})
</script>
