題目1： DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
DOM0事件通過JavaScript指定事件將一個函數方法直接賦值給一個元素事件處理程序事件。將這些屬性設置一個函數，這樣事件處理程序認為是元素的方法，事件處理在元素的作用域下運行，this即指向當前元素。
? DOM2事件定義兩個方法addEveListener和removeEveListener前者添加監聽事件后者移除監聽事件。所有DOM節點都包含這兩個方法，并且他們都接受三個參數，并且事件程序也是在元素的作用域下運行?？梢詾樵撛靥砑佣鄠€事件處理程序。
? 事件處理類型
? 事件處理方法
? 布爾參數，true是事件捕獲階段調用事件處理程序，false則在事件冒泡階段調用事件處理程序。默認false冒泡階段觸發
? DOM0 和 DOM2 區別1.DOM2可添加多個事件處理程序按照順序執行。而DOM0只能添加一個事件處理程序，一個事件只能綁定一次,并且新方法會覆蓋老方法.例如btn.onclick=function(){}
2.DOM0和DOM2均可移除事件處理程序，DOM0直接賦值null即可，而DOM2只可移除函數聲明的方法，匿名函數無法移除。
題目2： attachEvent與addEventListener的區別？
適用瀏覽器不同：attachEvent是IE的事件處理方法，addEventListener是標準瀏覽器的處理方式。
? 參數個數不相同：addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理。
? 第一個參數意義不同：addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）。
? 事件處理程序的作用域不相同：addEventListener的作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window。
? 為一個事件添加多個事件處理程序時，執行順序不同：addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律。
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
? IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。
? DOM2：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段。
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
? DOM瀏覽器：
? 阻止事件冒泡：stopPropagation()
? 阻止默認事件：preventDefault()
? IE瀏覽器：
? 阻止事件冒泡：cancelBubble 默認為false，設置為true后可以取消事件冒泡
? 阻止默認事件：returnValue 默認為true，設為false可以取消事件默認行為
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ctList=$$('.ct')[0].children;//nodeList的第一個索引下的子元素
for(var i=0;i< ctList.length;i++){
ctList[i].addEventListener('click',function(e){
console.log(e.target.innerText);
})
}
$$('.ct')[0].addEventListener('click',function(e){
//事件是冒泡的當點擊到邊角也會被監聽到所以加個判斷
//e.target 會是這個容器，因為會冒泡到容器考慮后面要打印的是li 的 innerText所以做個限制
if(e.target.tagName.toLowerCase() === 'li'){//toLowerCase()是個函數
console.log(e.target.innerText)
// e.target.classList.add('hover')
}
})
function $$(cls){
return document.querySelectorAll(cls)
}
題目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>
var List = $$('.ct')[0];//獲取的是Ul容器的這個document對象
console.log(List.firstChild,'List.first')
var btnStart = $('#btn-add-start')[0];//獲取的是nodeList
console.log(btnStart)
var btnEnd = $('#btn-add-end')[0];
var inputValue = $$('.ipt-add-content')[0];
List.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){//toLowerCase駝峰法
console.log(e.target.innerText);
}
})
btnStart.addEventListener('click',function(e){
var newLi = document.createElement('li');
var inpValue =inputValue.value;
if(/\S/.test(inpValue)){//test是正則的方法
newLi.innerText = inputValue.value;
List.insertBefore(newLi,List.firstChild)//insertBefore,firstChild
}
// console.log(inputValue.value,'zhi');
})
btnEnd.addEventListener('click',function(e){
var newLi = document.createElement('li');
var inpValue =inputValue.value;
if(/\S/.test(inpValue)){
newLi.innerText = inputValue.value;
// List.insertBefore(newLi,List.lastChild)//最后的之后這個也可以用
List.appendChild(newLi)//最后的之后
}
// console.log(inputValue.value,'zhi');
})
function $(id){
return document.querySelectorAll(id)
}
function $$(cls){
return document.querySelectorAll(cls)
}
</script>
題目7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的data-img對應的圖片。
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var List = $$('.ct')[0];
//這個是List.children || List.querySelectorAll('li')獲取li的集合的方法
var areaView= $$('.img-preview')[0];
console.log(areaView,'areaView')
List.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
imgSrc= e.target.getAttribute('data-img').toString()//這種方法也可以的，獲取的是個值不是字符串
console.log('imgSrc',imgSrc)
// areaView.innerHTML = '<img src = "'+ imgSrc +'">'//事HTML如果寫成 innerText就變成文本字符串了
areaView.innerHTML = '<img src = '+ imgSrc +'>'
}
})
function $(id){
return document.querySelectorAll(id)
}
function $$(cls){
return document.querySelectorAll(cls)
}
