事件
在使用JavaScript與DOM交互時(shí),事件是用到的比較多的.
JavaScript的事件機(jī)制是一個(gè)標(biāo)準(zhǔn)的觀察者模式(Observer Pattern),是一種抽象的訂閱者和開(kāi)發(fā)者的模式.我們可以在節(jié)點(diǎn)上添加上指定條件下的觸發(fā)事件.
事件綁定和事件監(jiān)聽(tīng)
在DOM level 0中事件是直接綁定的,比如
buttom.onclick = function(){}
到了DOM level 2的時(shí)候增加了事件監(jiān)聽(tīng),比如
button.addEventListener('click',function(){})
事件綁定的方法有個(gè)缺點(diǎn)就是它只能綁定一次,而使用addEventListener 可以綁定多個(gè)函數(shù),執(zhí)行順序按照綁定的先后順序來(lái)執(zhí)行.
在使用過(guò)程中發(fā)現(xiàn),如果我們?cè)谛枰脑厣隙继砑恿吮O(jiān)聽(tīng),那這是非常消耗資源和性能的,所以才有了事件委托.
什么是事件委托
事件委托是為了避免我們?cè)谔囟ǖ拿總€(gè)節(jié)點(diǎn)上都添加事件監(jiān)聽(tīng)器,而在父節(jié)點(diǎn)上來(lái)監(jiān)聽(tīng)冒泡上來(lái)的事件.
事件委托是基于冒泡機(jī)制的,所以本篇重點(diǎn)關(guān)注冒泡階段.瀏覽器的
冒泡
冒泡如下圖所示,element2的事件先被觸發(fā),然后是element1
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
舉例說(shuō)明
以下的例子我們都使用addEventListener ,其中參數(shù)e 為瀏覽器傳給我們的一個(gè)包含了事件各種屬性的對(duì)象.
第一個(gè)例子
現(xiàn)在我們有一個(gè)需求,要在點(diǎn)擊列表里面的時(shí)候在控制臺(tái)打印出hello.
先寫(xiě)HTML,稍微加點(diǎn)樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
li{background-color: red;}
ul{border: 20px solid green;}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>
</html>
要在點(diǎn)擊li的時(shí)候打出hello,
var liName = document.querySelectorAll('li')
function fn(e){
if(e.target.tagName === 'LI' ){ //target為當(dāng)前點(diǎn)擊的元素
console.log('hello')
}
}
//在每個(gè)li上添加監(jiān)聽(tīng)
liName[0].addEventListener('click',fn)
liName[1].addEventListener('click',fn)
liName[2].addEventListener('click',fn)
liName[3].addEventListener('click',fn)
每個(gè)元素上都添加監(jiān)聽(tīng)是非常耗資源的,我們可以在li的父元素ul上添加一個(gè)監(jiān)聽(tīng)事件
var ulTest = document.querySelector('ul')
function fn(e){
if(e.target.tagName === 'LI' ){
console.log('hello')
}
}
//添加ul上的監(jiān)聽(tīng)事件
ulTest.addEventListener('click',fn)
上面的代碼同樣可以達(dá)到同樣的需求,而且占用的資源更少.
那么如果我們需要監(jiān)聽(tīng)的元素不是li,而是li的子元素呢?
......
<ul>
<li><span>one</span></li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
......
改寫(xiě):
var ulTest = document.querySelector('ul')
var bodyTest = document.querySelector('body')
function fn(e){
var el = e.target
while(el.tagName !== 'LI'){
el = el.parentNode
}
if(el){
console.log('hello')
}else{
console.log('111')
}
}
//添加ul上的監(jiān)聽(tīng)事件
ulTest.addEventListener('click',fn)
上面的代碼中,點(diǎn)擊li中的span,ul也能夠出發(fā)監(jiān)聽(tīng)事件.會(huì)在用戶點(diǎn)擊的元素一級(jí)一級(jí)的往上找(冒泡),找到符合條件的就調(diào)用事件.
第二個(gè)例子
在div中有p和h1,其中又各有一個(gè)span.我們需要在點(diǎn)擊h1或h1里的span的時(shí)候觸發(fā)事件.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
p{ background-color: red;}
h1{ background-color: green;}
span{ background-color: yellow;}
</style>
</head>
<body>
<div>
<p>我是<span>p</span></p>
<h1>我是<span>h1</span></h1>
</div>
</body>
</html>
JS
var div = document.querySelector('div')
div.addEventListener('click',function(e){
var t = e.target
//尋找H1節(jié)點(diǎn)
while(t.tagName !== 'H1'){
if(t === div){
t = null
break;
}
t = t.parentNode
}
if(t){
console.log('你找到了h1')
}else{
console.log('你點(diǎn)擊了其他元素')
}
})
在上面的代碼中,首先在最外層的div上添加監(jiān)聽(tīng)事件,在while循環(huán)中我們判斷當(dāng)前的點(diǎn)擊元素是否為H1元素,如果不是我們往上查找,直到查到H1元素.如果查到了最外層的div元素,證明沒(méi)有在H1元素之內(nèi),我們就不需要再往上去查找了,所以這里我們將元素置為null.
參考
http://pij.robinqu.me/Browser_Scripting/DOM_Scripting/EventAPI.html
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
https://www.quirksmode.org/js/events_order.html
