題目1： DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
DOM0事件監聽方式：
- 內聯方式，與CSS內聯樣式相對
<input type="button" value="Click Here" onclick="alert('Clicked!');" />
- 事件處理程序的具體實現，在頁面其它地方定義
<input type="button" value="Click Here" onclick="showMessage();" />
DOM2事件監聽方式：
addEventListener()，參數列表：
- 事件類型
- 事件處理方法
- 布爾參數，如果是true表示在捕獲階段調用事件處理程序，如果是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事件監聽使用區別：DOM2可以為事件添加多個處理程序
題目2： attachEvent與addEventListener的區別？
- 參數個數不同：
attachEvent接收兩個參數（事件名稱和方法），addEventListener接收三個參數（事件類型、方法、布爾值） - 第一個參數意義不同：
addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload） - 事件處理程序的作用域不相同：
addEventListener的作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id - 為一個事件添加多個事件處理程序時，執行順序不同：
addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律(添加的方法少的時候大多是按添加順序的反順序執行的，但是添加的多了就無規律了)
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
IE事件冒泡：
DOM2事件傳播：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
DOM2事件傳播機制：事件開始時由最大的，不具體的元素接收，然后逐級向小的具體元素逐級傳遞，再反向傳出
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
阻止事件冒泡：
- 標準事件模型：
stopPropagation()
- IE事件模型：
cancelBubble默認為false，設置為true后可以取消事件冒泡
阻止默認事件：
- 標準事件模型：
preventDefault()
- IE事件模型：
returnValue默認為true，設為false可以取消事件默認行為
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
代碼：
<script>
var list = document.querySelectorAll('.ct>li');
for (var i = 0; i < list.length; i++){
list[i].addEventListener('click', function(e){
console.log(e.target.innerText);
});
}
</script>
題目6： 補全代碼，要求：
當點擊按鈕開頭添加時在<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>
//你的代碼
</script>
代碼：
<script>
var parent = document.querySelector('.ct');
var sAdd = document.querySelector('#btn-add-start');
var eAdd = document.querySelector('#btn-add-end');
var content = document.querySelector('.ipt-add-content');
parent.addEventListener('click', function(e){
console.log(e.target.innerText);
})
sAdd.addEventListener('click', function(e){
var add = document.createElement("li");
//var newContent = document.createTextNode(content.value);
//add.appendChild(newContent);
add.innerText = content.value;
parent.insertBefore(add, parent.firstChild);
});
eAdd.addEventListener('click', function(e){
var add = document.createElement("li");
var newContent = document.createTextNode(content.value);
add.appendChild(newContent);
parent.appendChild(add);
});
</script>
題目7： 補全代碼，要求：當鼠標放置在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>
//你的代碼
</script>
代碼：
<script>
var overImg = document.querySelector('.ct');
var showImg = document.querySelector('.img-preview');
overImg.addEventListener('mouseover', function(e){
var checkImg = document.querySelector('.img-preview img');
if (!checkImg){
var imgDiv = document.createElement('img');
var ctDiv = document.querySelector('.img-preview');
imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
ctDiv.appendChild(imgDiv);
}
else{
imgDiv = checkImg;
imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
}
//showImg.innerHTML = ' + ')'
})
</script>
