1.DOM事件和DOM2級在事件監聽使用方式上有啥區別？
事件監聽器也叫事件處理程序，是為了響應某個事件的方法
- DOM事件監聽方式
1.HTML內聯方式
<input type="button" value="Click Here" onclick="alert('Clicked!')">
2.JavaScript指定事件處理程序
把一個方法賦值給一個元素的事件處理程序屬性
<input id="btnClick" type="button" value="Click Here2">
<body>
<script>
var btnClick=document.getElementById('btnClick');
btnClick.onclick=function shoeMessage(){
alert(this.id);
}
</script>
-
DOM2事件監聽方式
DOM2事件處理程序，定義了兩個方法用于處理指定和刪除事件處理程序的操作;所有的DOM方法都包含這兩個方法，并且接受三個參數
1.addEventListener
2.removeEventListener
參數：
1.事件類型（click，mouseover....）
2.事件處理方法
3.true/false(默認值為false,冒泡階段才觸發)var btnClick=document.getElementById('btnClick'); btnClick.addEventListener('click',function(){ alert(this.id); })
2.attachEvent和addEventListener的區別是什么？
addEventListener: 是DOM2級獲取事件處理程序的方法，它包含三個參數（事件類型、事件處理方法、布爾參數true/false-默認值為false即是冒泡階段觸發）
attachEvent:IE瀏覽器事件處理程序方法，同時接收兩個參數：（事件處理程序名稱、事件處理程序方法）
3.解釋IE事件冒泡和DOM2事件的傳播機制？
IE事件冒泡：從點擊最具體的逐步往外冒泡，IE有且僅有事件冒泡機制
DOM2級事件：包含事件捕獲階段、處于目標階段、事件冒泡階段，大部分瀏覽器都支持DOM2事件流，IE除外；它包含的三個參數（事件類型、事件方法、布爾值）中的布爾值決定了該方法在那個階段觸發；默認值false在冒泡階段觸發，true在捕獲階段觸發。
4.如何阻止事件冒泡？如何阻止默認事件？
IE事件模型中：
1.如何阻止事件冒泡？
對event對象下的cancelBubble進行賦值
2.如何阻止默認行為？
對event對象下的returnValue進行賦值DOM2事件流中
1.如何阻止事件冒泡？
對event對象使用stopPropagation()方法
2.如何阻止默認事件？
對event對象使用preventDefault()方法
5.有如下代碼，需求當點擊每一個li的時候控制臺顯示該元素文本內容。不考慮兼容性
<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.補全代碼，要求
當點擊按鈕開頭添加時，在</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>
代碼
// 封裝一個函數，用來獲取相對應的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');
// 點擊尾部添加
end.addEventListener('click',function(){
var li=document.createElement('li');
ct.appendChild(li);
li.innerText=content.value;
content.value=''; //歸零清空輸入框內容
})
// 點擊頭部添加
star.addEventListener('click',function(){
var li=document.createElement('li');
ct.insertBefore(li,ct.firstChild);
li.innerText=content.value;
content.value='';
})
// 點擊console文本內容
li.forEach(function(ele){
ele.addEventListener('click',function(){
console.log(ele.innerText)
})
})
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>
代碼
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=''
})
})