js中事件繫結3種方法以及事件委託
阿新 • • 發佈：2019-02-04
事件繫結
首先，我先來介紹我們平時繫結事件的三種方法。
1.嵌入dom
<button onclick="open()">按鈕</button>
<script>
function open(){
alert(1)
}
</script>2.直接繫結
<button id="btn">按鈕</button>
<script>
document.getElementById('btn').onclick = function(){
alert(1)
}
</script>
3.事件監聽
<button id="btn">按鈕</button>
<script>
document.getElementById('btn').addEventListener('click',function(){
alert(1)
})
//相容IE
document.getElementById('btn').attachEvent('click',function(){
alert(1)
})
</script>事件委託
對“事件處理程式過多”問題的解決方案就是事件委託。事件委託利用了事件冒泡，只制定一個事件處理程式，就可以管理某一型別的所有事件。例如click事件一直會冒泡到document層。也就是我們可以只指定onclick事件處理程式，而不必給每個事件分別新增處理程式。
下面我們來看一個阿里巴巴筆試題的例子。
樣式以及DOM結構
<style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90 不用事件委託。而這種方法造成的代價是，效能的大量浪費。如果是成千上萬條資料，頁面將會嚴重卡頓，甚至崩潰。
function Contact(){
this.init();
}
Contact.prototype.init = function(){
var userdel = document.querySelectorAll('.user-delete');
for(var i=0;i<lis.length;i++){
(function(j){
userdel[j].onclick = function(){
userdel[j].parentNode.parentNode.removeChild(userdel[j].parentNode);
}
})(i);
}
}
new Contact();使用事件委託，只繫結一次事件，大大減少了效能的損耗。也是在需要大量事件處理程式中一種非常好的解決方式。
function Contact(){
this.init();
}
Contact.prototype.init = function(){
var lis = document.querySelector('#J_List');
lis.addEventListener('click', function(e){
var target = e.target || e.srcElement;
if (!!target && target.className.toLowerCase()==='user-delete') { target.parentNode.parentNode.removeChild(target.parentNode);
}
})
}
new Contact();