1.編寫一個通用的事件監聽函數
2.描述事件冒泡流程
3.對于一個無限下拉加載圖片的頁面，如何給每個圖片綁定事件
知識點#####
- 通用事件綁定
//標準方法
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() //阻止默認行為
alert('link1 has clicked')
})
IE低版本使用attachEvent綁定事件，和W3C標準不一樣
- 事件冒泡
<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>
點擊p1，彈出激活，如果沒有e.stopPropagation()，事件將繼續向上冒泡找到body的alert('取消')
- 代理
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!-- 會隨時新增更多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>
點擊每一個a標簽彈出對應的標簽內的內容
解題#####
1.編寫一個通用的事件監聽函數
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)){ //判斷目標節點是否和選擇器匹配
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樹形結構
- 事件冒泡
- 阻止冒泡
3.對于一個無限下拉加載圖片的頁面，如何給每個圖片綁定事件
使用代理
