事件
- 通用事件綁定
var btn=document.getElementById(‘btn1’);
btn.addEventListener(‘click’,function(event){ //JS事件綁定
console.log(‘clicked’)
})
//由于addEventListener太長了 我們自己寫一個事件綁定函數(shù)
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var a=document.getElementById(‘link1’)
bindEvent(a,’click’,function(e){ //事件綁定函數(shù)的使用
e.preventDefault() //阻止默認行為
alert(‘clicked’)
})
注：關(guān)于IE低版本的兼容性
IE低版本使用attachEvent綁定事件，和W3C標準不一樣
事件冒泡
在父級 div 中定義的事件，會在子級的事件執(zhí)行之后冒泡上來執(zhí)行
- 阻止事件冒泡 e.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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">
利用阻止冒泡的機制實現(xiàn)：只點擊 p1 的時候彈窗激活
function bindEvent(elem,type,func) {
elem.addEventListener(type,func)
}
var p1 = document.getElementById('p1')
bindEvent(p1,'click',function(e){
e.stopPropagation()
alert('激活')
})
bindEvent(body,'click',function (e) {
alert('取消')
})
</script>
</body>
</html>
- 代理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<div id="div2">
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<script type="text/javascript">
寫一個帶有代理功能的事件監(jiān)聽函數(shù)
function bindEvent(elem,type,selector,fn){
if(fn == null){
fn = selector
selector = null
}
elem.addEventListener(type,function(e){
var target
if(selector){
//代理
target = e.target //獲得觸發(fā)事件的元素
if(target.matches(selector)){ //判斷觸發(fā)事件的類型
fn.call(target,e) //將fn里的this替換為target
}
}else{
//不是代理
fn(e)
}
})
}
var div1 = document.getElementById('div1')
bindEvent(div1,'click','a',function(e){
e.preventDefault()
console.log(this.innerHTML)
})
var p1 = document.getElementById('p1')
bindEvent(p1,'click',function(e){
console.log(p1.innerHTML)
})
</script>
</body>
</html>
練習題
練習題1、編寫一個通用的事件監(jiān)聽函數(shù)
看上面的bindEvent函數(shù)
練習題2、描述事件冒泡流程
1、DOM樹形結(jié)構(gòu)
2、事件冒泡
3、阻止冒泡
4、冒泡的應(yīng)用(代理)
練習題3、對于一個無線下拉加載圖片的頁面，如何給每個圖片綁定事件
1、使用代理
2、知道代理的兩個優(yōu)點
（1）代碼簡潔
（2）減少瀏覽器內(nèi)存占用
