Javascript基礎知識體系化學習總結（七）事件
一、事件綁定
1.事件綁定就是element.addEventListener（type，fn）.
2.接收兩個參數，type（綁定事件的類型如’click’ 點擊事件）、fn（事件函數，書寫具體的事件）
3.fn中接收一個參數，一般寫爲e/event，代表我們綁定的元素，很多操作例如e.preventDefault（）阻止默認行爲、e.target獲取當前點擊元素，都是藉助這個參數來實現。
二、事件冒泡
1.什麼是冒泡：通俗的講就是不僅僅觸發當前元素的事件還能向上冒泡觸發到其父元素甚至更上面元素的事件。
2.冒泡的過程：基於DOM結構樹，事件順着觸發元素向上冒泡。
3.引用場景：事件代理。
三、事件代理
1.什麼是事件代理：就是利用事件冒泡，讓本應該在子元素實現的事件移到父元素上（或者更上層的元素）。
2.應用場景：瀑布流（即無限的下拉刷新加載）
3.好處：不需要給每個子元素都綁定事件，減少瀏覽器的內存佔用，需要注意的是事件代理不能亂用，最好是在這種極端情況下即瀑布流才使用。
4.手寫一個通用的事件綁定函數：
<!DOCTYPE html>
<html>
<head>
<title>通用事件綁定函數</title>
</head>
<body>
<div id="div1">
<p id="p1">月影蒼狼</p>
<p>聖血天使</p>
</div>
<script type="text/javascript">
function bindEvent (elem, type, selector, fn) { // 四個參數分別是要綁定事件的元素，事件類型，被代理元素，執行的函數
if(fn == null) { // 如果第四個值爲null沒有傳，說明只是普通的事件綁定函數，調一下位置即可
fn = selector
selector = null
}
elem.addEventListener(type, event => {
const target = event.target // 拿到當前點擊的元素
if(selector) { // 如果是事件代理
if(target.matches(selector)) { // 判斷當前點擊的元素是否匹配我們的被代理元素，匹配則執行函數
fn.call(target, event)
}
}else { // 普通的事件綁定函數
fn.call(target, event)
}
})
}
const p1 = document.getElementById('p1')
const div1 = document.getElementById('div1')
// 普通的事件綁定，注意這裏不能使用箭頭函數，否則會指到全局作用域
bindEvent(p1,'click',function(event){
alert(this.innerHTML)
})
// 事件代理函數，注意這裏不能使用箭頭函數，否則會指到全局作用域
bindEvent(div1,'click','p',function(event){
console.log(this.innerHTML)
})
</script>
</body>
</html>
好了，javascript的第七個模塊大概就是這些內容了，我會將它分爲11個模塊然後13篇文章左右把它講完（有的模塊內容多會範圍上下期大概。。。），學完這些模塊相信大家對基礎的js會有一個比較體系化的認識，那麼大家加油，我是O5,我們下次見！