1.編寫一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)
2.描述事件冒泡流程
3.對(duì)于一個(gè)無(wú)限下拉加載圖片的頁(yè)面，如何給每個(gè)圖片綁定事件
知識(shí)點(diǎn)
通用事件綁定
//標(biāo)準(zhǔn)方法
var btn=document.getElementById('btn1') btn.addEventListener('click',function(e){ console.log('clicked'); }) //封裝事件綁定 function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var a=document.getElementById('link1') myBindEvent(a,'click',function(e){ e.preventDefault() //阻止默認(rèn)行為 alert('link1 has clicked') })
IE低版本使用attachEvent綁定事件言沐，和W3C標(biāo)準(zhǔn)不一樣
事件冒泡
<div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> <script type="text/javascript"> function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var p1=document.getElementById('p1') var body=document.body myBindEvent(p1,'click',function(e){ e.stopPropagation() //阻止冒泡 alert('激活') }) myBindEvent(body,'click',function(e){ alert('取消') }) </script>
點(diǎn)擊p1赶诊，彈出激活，如果沒(méi)有e.stopPropagation()罩抗，事件將繼續(xù)向上冒泡找到body的alert('取消')
代理
<div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> </div>
<script type="text/javascript"> function myBindEvent(elem,type,fn){ elem.addEventListener(type,fn) } var div1=document.getElementById('div1') myBindEvent(div1,'click',function(e){ var target=e.target //獲取要綁定事件的元素 if(target.nodeName==='A'){ alert(target.innerHTML) } }) </script>
點(diǎn)擊每一個(gè)a標(biāo)簽彈出對(duì)應(yīng)的標(biāo)簽內(nèi)的內(nèi)容
解題
1.編寫一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)
function myBindEvent(elem,type,selector,fn){
if(fn==null){
fn=selector
selector=null
}
elem.addEventListener(type,function(e){
var target
if(selector){
// 代理
target=e.target
if(target.matches(selector)){ //判斷目標(biāo)節(jié)點(diǎn)是否和選擇器匹配
fn.call(target,e)
}
}else{
// 不使用代理
fn(e)
}
})
}
//使用代理
var div1=document.getElementById('div1')
myBindEvent(div1,'click','a',function(e){
e.preventDefault()
console.log(this.href);
})
//不使用代理
var btn1=document.getElementById('btn1')
myBindEvent(btn1,'click',function(e){
console.log(btn1.innerHTML);
})
2.描述事件冒泡流程
DOM樹(shù)形結(jié)構(gòu)
事件冒泡
阻止冒泡
3.對(duì)于一個(gè)無(wú)限下拉加載圖片的頁(yè)面，如何給每個(gè)圖片綁定事件
使用代理
