事件
在使用JavaScript與DOM交互時,事件是用到的比較多的.
JavaScript的事件機制是一個標準的觀察者模式(Observer Pattern),是一種抽象的訂閱者和開發者的模式.我們可以在節點上添加上指定條件下的觸發事件.
事件綁定和事件監聽
在DOM level 0中事件是直接綁定的,比如
buttom.onclick = function(){}
到了DOM level 2的時候增加了事件監聽,比如
button.addEventListener('click',function(){})
事件綁定的方法有個缺點就是它只能綁定一次,而使用addEventListener 可以綁定多個函數,執行順序按照綁定的先后順序來執行.
在使用過程中發現,如果我們在需要的元素上都添加了監聽,那這是非常消耗資源和性能的,所以才有了事件委托.
什么是事件委托
事件委托是為了避免我們在特定的每個節點上都添加事件監聽器,而在父節點上來監聽冒泡上來的事件.
事件委托是基于冒泡機制的,所以本篇重點關注冒泡階段.瀏覽器的
冒泡
冒泡如下圖所示,element2的事件先被觸發,然后是element1
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
舉例說明
以下的例子我們都使用addEventListener ,其中參數e 為瀏覽器傳給我們的一個包含了事件各種屬性的對象.
第一個例子
現在我們有一個需求,要在點擊列表里面的時候在控制臺打印出hello.
先寫HTML,稍微加點樣式
<!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>
要在點擊li的時候打出hello,
var liName = document.querySelectorAll('li')
function fn(e){
if(e.target.tagName === 'LI' ){ //target為當前點擊的元素
console.log('hello')
}
}
//在每個li上添加監聽
liName[0].addEventListener('click',fn)
liName[1].addEventListener('click',fn)
liName[2].addEventListener('click',fn)
liName[3].addEventListener('click',fn)
每個元素上都添加監聽是非常耗資源的,我們可以在li的父元素ul上添加一個監聽事件
var ulTest = document.querySelector('ul')
function fn(e){
if(e.target.tagName === 'LI' ){
console.log('hello')
}
}
//添加ul上的監聽事件
ulTest.addEventListener('click',fn)
上面的代碼同樣可以達到同樣的需求,而且占用的資源更少.
那么如果我們需要監聽的元素不是li,而是li的子元素呢?
......
<ul>
<li><span>one</span></li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
......
改寫:
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上的監聽事件
ulTest.addEventListener('click',fn)
上面的代碼中,點擊li中的span,ul也能夠出發監聽事件.會在用戶點擊的元素一級一級的往上找(冒泡),找到符合條件的就調用事件.
第二個例子
在div中有p和h1,其中又各有一個span.我們需要在點擊h1或h1里的span的時候觸發事件.
<!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節點
while(t.tagName !== 'H1'){
if(t === div){
t = null
break;
}
t = t.parentNode
}
if(t){
console.log('你找到了h1')
}else{
console.log('你點擊了其他元素')
}
})
在上面的代碼中,首先在最外層的div上添加監聽事件,在while循環中我們判斷當前的點擊元素是否為H1元素,如果不是我們往上查找,直到查到H1元素.如果查到了最外層的div元素,證明沒有在H1元素之內,我們就不需要再往上去查找了,所以這里我們將元素置為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
