關于事件綁定的面試題和實際運用
如何編寫一個通用的原生事件監(jiān)聽函數(shù)？
// 簡單封裝一個通用事件綁定
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
e.preventDefault(); // 阻止標簽默認行為
alert('click')
});
// 關于低版本時間兼容
// 使用attachEvent綁定事件
關于低版本的瀏覽器我們只需要了解就好了，如果你在面試中如果要求要對很低版本的瀏覽器做兼容的話，建議你還是換一個機會去面，處理低版本瀏覽器的兼容是浪費生命的一件事情。
使用事件冒泡實現(xiàn)代理事件綁定？
在實際工作運用中,比如這么一個場景：我們要對一頁的多個圖片項做事件綁定，如果我們一個個對圖片綁定是一件很麻煩的事情，而且還有對重新加載的圖片做重新的綁定這是個很麻煩的時候。所以我們使用事件冒泡實現(xiàn)代理綁定事件就完美解決了這些問題.。
這里我們使用綁定父元素的點擊事件，然后使用子元素的冒泡事件觸發(fā)點擊，然后通過e.target（事件目標對象）判斷觸發(fā)事件元素的那個。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dom事件</title>
</head>
<body>
<a href="#" id='link1'>事件綁定</a>
<div id="div1">
<a href="#" id="a1">1</a>
<a href="#" id="a2">2</a>
<a href="#" id="a3">3</a>
<!-- 一會隨時新增更多的a便簽 -->
</div>
<script>
var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
e.preventDefault();
var target = e.target;
if(target.nodeName === 'A'){
alert(target.innerHTML);
}
})
</script>
</body>
</html>
所以我們現(xiàn)在重新封裝通用事件的件兼容函數(shù)
// elem:元素 type:事件類型 selector:目標元素節(jié)點的名稱 fn：事件觸發(fā)方法
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
// matches target是
if(target.matches(selector)){
fn.call(target,e)
}
}else{
fn(e)
}
})
}
bindEvent(div1,'click','a',function(e){
alert(e.target.innerHTML)
})
