一分鐘教你手寫一個通用的事件綁定函數（支持普通函數和事件代理函數）
一、寫在開頭
最近一直在搞小程序，有點膩了，順便複習了一下js，剛好可以寫一個比較通用的綁定事件，見笑了各位。
二、發現問題
封裝了一個綁定事件的函數，兼顧了普通函數和事件代理（多了一些對被代理元素的判斷）
三、解決問題
因爲該事件比較簡單，我就把具體的解釋直接寫在代碼的註釋中，如下：
<!DOCTYPE html>
<html>
<head>
<title>通用事件綁定函數</title>
</head>
<body>
<script type="text/javascript">
function bindEvent(elem,type,selector,fn){
if(fn==null){//先判斷是普通的函數還是代理的函數
fn=selector,
selector=null
}//普通函數不存在被代理的元素，而且只有三個元素，所以第四個參數fn必然爲null，原本的函數被傳到selector，故調換一下
elem.addEventListener(type,event=>{//代理函數可以直接進入這一步，綁定事件
const target=event.target//獲取當前執行這個事件的元素
if(selector){//代理函數需要走這個分支做判斷，如果當前執行事件的元素確實是我們被代理的元素則可以執行函數
if(target.matches(selector)){
fn.call(target,event)
}
}else{//普通函數直接調用函數即可
fn.call(target,event)
}
})//call只是爲了修改this的指向，指向當前執行事件的元素
}
</script>
</body>
</html>
好了，目前先到這，我是O5,希望能幫助到大家，共勉！