DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別丰泊？
-
Dom0級(jí)事件處理程序:
在DOM0級(jí)事件處理程序，事件名以'on'開頭询一，因此click事件的事件處理程序就是onclick求冷、load事件的事件處理程序就是onload侠草。
DOM0事件監(jiān)聽方式：
內(nèi)聯(lián)方式朽褪，與CSS內(nèi)聯(lián)樣式相對(duì)<input type="button" value="Click Here" onclick="alert('Clicked!');" />事件處理程序的具體實(shí)現(xiàn)置吓，在頁面其它地方定義
<input type="button" value="Click Here" onclick="showMessage();" />DOM2事件監(jiān)聽方式:
DOM2事件監(jiān)聽方式：
addEventListener()，參數(shù)列表：1.事件類型
2.事件處理方法
3.布爾參數(shù)缔赠，如果是true表示在捕獲階段調(diào)用事件處理程序衍锚，如果是false，則是在事件冒泡階段處理使用舉例：
<input id="btnClick" type="button" value="Click Here" /> <script type="text/javascript"> var btnClick = document.getElementById('btnClick'); btnClick.addEventListener('click', function() { alert(this.id); }, false); </script>DOM0和DOM2事件監(jiān)聽使用區(qū)別：DOM2可以為事件添加多個(gè)處理程序
attachEvent與addEventListener的區(qū)別嗤堰？
參數(shù)個(gè)數(shù)不同：attachEvent接收兩個(gè)參數(shù)（事件名稱和方法）戴质，addEventListener接收三個(gè)參數(shù)（事件類型、方法、布爾值）
第一個(gè)參數(shù)意義不同：addEventListener第一個(gè)參數(shù)是事件類型（比如click告匠，load）戈抄，而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
事件處理程序的作用域不相同：addEventListener的作用域是元素本身后专，this是指的觸發(fā)元素呛凶，而attachEvent事件處理程序會(huì)在全局變量內(nèi)運(yùn)行，this是window行贪，所以剛才例子才會(huì)返回undefined，而不是元素id
為一個(gè)事件添加多個(gè)事件處理程序時(shí)模闲，執(zhí)行順序不同：addEventListener添加會(huì)按照添加順序執(zhí)行建瘫，而attachEvent添加多個(gè)事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)
解釋IE事件冒泡和DOM2事件傳播機(jī)制尸折？
-
IE事件冒泡：
對(duì)一個(gè)例如div這樣的子容器進(jìn)行事件監(jiān)聽啰脚，IE的傳播機(jī)制是從事件目標(biāo)節(jié)點(diǎn)逐步的向上層結(jié)點(diǎn)傳播，直到到達(dá)根結(jié)點(diǎn)
-
DOM2事件傳播機(jī)制：
事件開始時(shí)由最大的实夹，不具體的元素接收橄浓，然后逐級(jí)向小的具體元素逐級(jí)傳遞，再反向傳出
如何阻止事件冒泡亮航？ 如何阻止默認(rèn)事件荸实？
阻止事件冒泡：
標(biāo)準(zhǔn)事件模型：
stopPropagation()
IE事件模型：
cancelBubble默認(rèn)為false，設(shè)置為true后可以取消事件冒泡
阻止默認(rèn)事件：
標(biāo)準(zhǔn)事件模型：
preventDefault()
IE事件模型：
returnValue默認(rèn)為true缴淋，設(shè)為false可以取消事件默認(rèn)行為
有如下代碼准给，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
補(bǔ)全代碼重抖，要求：
當(dāng)點(diǎn)擊按鈕開頭添加時(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">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//你的代碼
</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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_ptkO7vx9EJuwH5s77RG-3iJgr5m5S_uuI1BvCe_7ZEM2qMeheA">鼠標(biāo)放置查看圖片1</li>
<li data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWOW3gGugBOD58u1mL6_uThLR2L7n4PpQo_WPdcY28u5FzKL7n">鼠標(biāo)放置查看圖片2</li>
<li data-img="https://ws1.sinaimg.cn/large/005GwhDcgy1fig0cbn4mpj305k046t8n.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
var ct = document.querySelector('.ct'),
childs = ct.querySelectorAll('li'),
preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){
childs[i].addEventListener('mouseenter', function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = ''
});
}
</script>