1.DOM事件和DOM2級(jí)在事件監(jiān)聽使用方式上有啥區(qū)別？
事件監(jiān)聽器也叫事件處理程序，是為了響應(yīng)某個(gè)事件的方法
- DOM事件監(jiān)聽方式
1.HTML內(nèi)聯(lián)方式
<input type="button" value="Click Here" onclick="alert('Clicked!')">
2.JavaScript指定事件處理程序
把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩?/p>
<input id="btnClick" type="button" value="Click Here2">
<body>
<script>
var btnClick=document.getElementById('btnClick');
btnClick.onclick=function shoeMessage(){
alert(this.id);
}
</script>
-
DOM2事件監(jiān)聽方式
DOM2事件處理程序，定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作;所有的DOM方法都包含這兩個(gè)方法，并且接受三個(gè)參數(shù)
1.addEventListener
2.removeEventListener
參數(shù)：
1.事件類型（click，mouseover....）
2.事件處理方法
3.true/false(默認(rèn)值為false,冒泡階段才觸發(fā))var btnClick=document.getElementById('btnClick'); btnClick.addEventListener('click',function(){ alert(this.id); })
2.attachEvent和addEventListener的區(qū)別是什么？
addEventListener: 是DOM2級(jí)獲取事件處理程序的方法，它包含三個(gè)參數(shù)（事件類型、事件處理方法、布爾參數(shù)true/false-默認(rèn)值為false即是冒泡階段觸發(fā)）
attachEvent:IE瀏覽器事件處理程序方法，同時(shí)接收兩個(gè)參數(shù)：（事件處理程序名稱、事件處理程序方法）
3.解釋IE事件冒泡和DOM2事件的傳播機(jī)制？
IE事件冒泡：從點(diǎn)擊最具體的逐步往外冒泡，IE有且僅有事件冒泡機(jī)制
DOM2級(jí)事件：包含事件捕獲階段、處于目標(biāo)階段、事件冒泡階段，大部分瀏覽器都支持DOM2事件流，IE除外；它包含的三個(gè)參數(shù)（事件類型、事件方法、布爾值）中的布爾值決定了該方法在那個(gè)階段觸發(fā)；默認(rèn)值false在冒泡階段觸發(fā)，true在捕獲階段觸發(fā)。
4.如何阻止事件冒泡？如何阻止默認(rèn)事件？
IE事件模型中：
1.如何阻止事件冒泡？
對(duì)event對(duì)象下的cancelBubble進(jìn)行賦值
2.如何阻止默認(rèn)行為？
對(duì)event對(duì)象下的returnValue進(jìn)行賦值DOM2事件流中
1.如何阻止事件冒泡？
對(duì)event對(duì)象使用stopPropagation()方法
2.如何阻止默認(rèn)事件？
對(duì)event對(duì)象使用preventDefault()方法
5.有如下代碼，需求當(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>
代碼
function $(e){
if(document.querySelectorAll(e).length > 1){
return document.querySelectorAll(e);
}else{
return document.querySelector(e);
}
}
var li = $('li')
for(var i = 0; i < li.length; i ++){
li[i].addEventListener('click', function(){
console.log(this.innerText)
})
}
6.補(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>
代碼
// 封裝一個(gè)函數(shù)，用來(lái)獲取相對(duì)應(yīng)的DOM-node
function $(ele){
if(document.querySelectorAll(ele).length>1){
return document.querySelectorAll(ele)
}
else{
return document.querySelector(ele)
}
}
var star=$('#btn-add-start');
var end=$('#btn-add-end');
var content=$('.ipt-add-content');
var ct=$('.ct');
var li=$('.ct>li');
// 點(diǎn)擊尾部添加
end.addEventListener('click',function(){
var li=document.createElement('li');
ct.appendChild(li);
li.innerText=content.value;
content.value=''; //歸零清空輸入框內(nèi)容
})
// 點(diǎn)擊頭部添加
star.addEventListener('click',function(){
var li=document.createElement('li');
ct.insertBefore(li,ct.firstChild);
li.innerText=content.value;
content.value='';
})
// 點(diǎn)擊console文本內(nèi)容
li.forEach(function(ele){
ele.addEventListener('click',function(){
console.log(ele.innerText)
})
})
7.補(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="1.png">鼠標(biāo)放置查看圖片1</li>
<li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
<li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
</script>
代碼
function $(ele){
if(document.querySelectorAll(ele).length>0){
return document.querySelectorAll(ele);
}
else{
return document.querySelector(ele);
}
}
var ct=$('.ct');
var ImgPreview=$('.img-preview');
var list=$('.ct>li');
list.forEach(function(ele){
ele.addEventListener('mouseenter',function(){
var img=document.createElement('img');
img.src=ele.getAttribute('data-img');
ImgPreview[0].appendChild(img);
})
ele.addEventListener('mouseleave',function(ele){
ImgPreview[0].innerHTML=''
})
})