DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別废岂？
DOM0事件是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩裕?br>
例如：var a.onclick = function（）{}
DOM2是給一個(gè)事件添加一個(gè)處理程序耳幢，而且可以添加多個(gè)處理程序
a.addEventListener( 'click' , function(e){ console.log(e); } )
attachEvent與addEventListener的區(qū)別走搁？
- attachEvent在IE上使用府寒，addEventListener在標(biāo)準(zhǔn)流里使用
- attachEvent里面的作用域是全局作用域唱凯，this指window尔许，addEventListener里this指當(dāng)前
- attachEvent里面函數(shù)執(zhí)行順序從下往上，addEventListener則是從上往下
- attachEvent的事件相對(duì)于addEventListener要加一個(gè)on
- attachEvent（）括號(hào)里面只能添加兩個(gè)參數(shù)诀浪，事件和處理函數(shù)棋返，addEventListener則可以添加三個(gè)，事件雷猪、函數(shù)睛竣、監(jiān)聽(tīng)方式（true/false），true代表事件捕獲階段處理事件求摇，為false的話在冒泡階段處理事件射沟，默認(rèn)為false。
解釋IE事件冒泡和DOM2事件傳播機(jī)制与境？
IE事件冒泡：就是事件從下往上傳播验夯，事件由最開(kāi)始接收的節(jié)點(diǎn)開(kāi)始，往上一級(jí)一級(jí)傳播
DOM2事件傳播機(jī)制：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段摔刁，事件捕獲階段簿姨，處于目標(biāo)階段，事件冒泡階段簸搞，首先發(fā)生的是事件捕獲扁位，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件趁俊，最后是冒泡階段
如何阻止事件冒泡域仇？ 如何阻止默認(rèn)事件？
阻止冒泡：添加一個(gè)e.stopPropagation()的事件寺擂，IE的話添加cancelBubble：true
標(biāo)準(zhǔn)流阻止默認(rèn)事件：e.preventDefault() IE：window.event.returnValue：false
有如下代碼暇务，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct"> <li>這里是</li> <li>饑人谷</li> <li>前端6班</li> </ul> <script> var wrap = document.querySelector(".ct"); wrap.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase() === "li"){ console.log(e.target.innerText); } }); </script>
補(bǔ)全代碼怔软，要求：
當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素垦细，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容挡逼。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script> function $(cls){ return document.querySelector(cls); } $(".ct").addEventListener("click",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ console.log(e.target.innerText); } }); $("#btn-add-end").addEventListener("click",function(e){ var newLi = document.createElement("li"); newLi.innerText = $(".ipt-add-content").value ; $(".ct").appendChild(newLi); }); $("#btn-add-start").addEventListener("click",function(e){ var newLi = document.createElement("li"); newLi.innerText = $(".ipt-add-content").value ; $(".ct").insertBefore(newLi,$(".ct").firstChild); }); </script>
補(bǔ)全代碼括改，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片家坎。
<ul class="ct">
<li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
<li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
<li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script> function $(cls){ return document.querySelector(cls); } $(".ct").addEventListener("mouseover",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ var newImg = document.createElement("img"); newImg.innerHTML = e.target.data-img ; $(".img-preview").appendChild(newImg); } }); $(".ct").addEventListener("mouseout",function(e){ if(e.target.tagName.toLowerCase() ==="li"){ newImg.innerHTML = "" ; } }); </script>
