DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
- DOM0級事件處理程序是將一個函數賦值給一個事件處理程序屬性，而通過將事件處理程序設置為null刪除綁定在元素上的事件處理程序。這種方法無法給一個事件添加多個事件處理程序，后面的程序會覆蓋前面的程序。
- DOM2級定義了
addEventListener()和removeEventListener()用于處理指定和刪除事件處理程序。所有DOM節點都包含這兩個方法，并且它們都接受3個參數，要處理的事件名、作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
區別：
使用DOM2級方法可以定義事件在捕獲階段或是在冒泡階段被處理，同樣的一個事件可以定義多個事件處理程序。而DOM0級為一個事件添加多個事件處理程序時，后面的程序會覆蓋前面的。
attachEvent與addEventListener的區別？
- 參數個數不相同；
addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段） - 第一個參數意義不同；
addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload） - 事件處理程序的作用域不相同；
addEventListener的作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以會返回undefined，而不是元素id。 - 為一個事件添加多個事件處理程序時，執行的順序不同。
addEventListener會按照添加的順序執行。attachEvent添加多個事件處理程序時，順序是無規律的。
解釋IE事件冒泡和DOM2事件傳播機制？
IE事件冒泡
事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。IE不支持事件流，只支持事件冒泡。
<img src="/uploads/default/original/2X/4/477d88cae1ccbb2c9c91ce6a13d5a8a45225b1aa.png" width="244" height="192">DOM2事件流
DOM2級事件規定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段。
<img src="/uploads/default/original/2X/4/4e494f5467a8b571682d24e0314a20879ee1ab6d.png" width="244" height="178">
如何阻止事件冒泡？ 如何阻止默認事件？
DOM中的事件對象：
阻止事件冒泡用stopPropagation()
阻止默認事件用preventDefault()IE中的事件對象：
阻止事件冒泡用cancelBubble，設置為true。
阻止默認事件用returnValue，設置為false。
有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//使用事件代理，把事件監聽綁定到父容器上，根據事件的來源進行處理
var ct = document.querySelector('.ct');
ct.addEventListener('click',function(e){
console.log(e.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 ct = document.querySelector('.ct'),
addStartBtn = document.querySelector('#btn-add-start'),
addEndBtn = document.querySelector('#btn-add-end'),
ipt = document.querySelector('.ipt-add-content');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
});
addEndBtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
});
addStartBtn.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
});
</script>
補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的data-img對應的圖片。
<ul class="ct">
<li data-img="http://p1.music.126.net/__TmjLJQW5SruPDS_oGblQ==/18687299627720883.jpg">鼠標放置查看圖片1</li>
<li data-img="http://p1.music.126.net/bEGB_dBJJJSn6IDLw2iB7w==/18897306346926883.jpg">鼠標放置查看圖片2</li>
<li data-img="http://p1.music.126.net/uIbPj9d7KkdttBluICVTlg==/19101815509735634.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct')
var childs = ct.querySelectorAll('li')
var 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 = '<img src="' + dataImg + '">'
});
}
</script>
寫一個函數，批量操作 css
function css(node, styleObj){
for(var key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body,{
'color': 'red',
'background-color': '#ccc'
})
如何獲取 DOM 計算后的樣式
使用getComputedStyle獲取元素計算后的樣式
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
