DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別已卷？
var box = getElementIdBy('div');
box.onclick = function(){
console.log(this);
}//DOM0事件監(jiān)聽方式（只能給元素綁定一個事件）
box.addEventListener('click',function(){
console.log(this);
})//DOM2事件監(jiān)聽方式（可以給元素綁定多個事件）
attachEvent與addEventListener的區(qū)別？
- IE8.0以下不支持addEventListener柿顶，而是使用attachEvent方法
- 由于IE只支持冒泡事件裙秋，所以attachEvent添加的事件會被添加到冒泡階段。
- attachEvent的事件名前面要加上on如onclick拄轻，addEventListener則去掉了on。
- 在attachEvent的事件處理程序中伟葫，它的作用域是全局作用域恨搓，this等于window； 而在addEventListener里事件處理程序的作用域是元素的作用域筏养，this等于元素本身斧抱。
解釋IE事件冒泡和DOM2事件傳播機制？
- IE事件冒泡：事件開始時由最具體的元素接收渐溶，然后逐級向上傳播到較為不具體的元素
- DOM事件流：DOM2級事件規(guī)定事件流包括三個階段辉浦，事件捕獲階段，處于目標階段茎辐，事件冒泡階段宪郊，首先發(fā)生的是事件捕獲，為截取事件提供機會荔茬，然后是實際目標接收事件废膘，最后是冒泡階段。
如何阻止事件冒泡慕蔚？ 如何阻止默認事件丐黄？
stopPropgation();//取消事件進一步捕獲或者冒泡
preventDefault();//取消事件默認行為
有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容孔飒。不考慮兼容
<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>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串坏瞄；當點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內(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>
var ct = $('.ct'),
start = $('#btn-add-start'),
end = $('#btn-add-end'),
firstLi = $('.ct>li')
input = $('.ipt-add-content');
ct.addEventListener('click',function(e){
console.log(e.target.innerText);
})
start.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = input.value;
ct.insertBefore(li,firstLi);
})
end.addEventListener('click',function(){
var li = document.createElement('li');
li.innerText = input.value;
ct.appendChild(li);
})
function $(element){
return document.querySelector(element);
}
</script>
補全代碼，要求：當鼠標放置在li元素上鸠匀，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片蕉斜。
<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>
var ct = $('.ct'),
imgPreview = $('.img-preview'),
img = document.createElement('img');
ct.addEventListener('mouseover',function(e){
if(e.target.tagName === 'LI'){
imgPreview.appendChild(img);
img.src = e.target.getAttribute('data-img');
}
})
// ct.addEventListener('mouseout',function(){
// imgPreview.removeChild(img);
// })
function $(element){
return document.querySelector(element);
}
</script>
