事件委托，其實之前有用過放案，但是就是百度了一下，并不了解它的優(yōu)點到低好在哪里矫俺。今天突發(fā)奇想就了解了一下吱殉。
那下來總結(jié)一下吧。
- 什么是事件委托厘托？
事件委托友雳，也叫事件代理。利用了事件冒泡铅匹，可以用一個事件處理方法押赊，管理處理一類事件。 - 事件委托的好處包斑？
比如我們要給所有的li設(shè)置相同的onclick事件流礁，首先想到的就是用for循環(huán)遍歷了吧，但是每一次遍歷就會進行一次dom操作罗丰。而添加到頁面上的事件數(shù)量將直接關(guān)系到頁面的整體運行性能神帅，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多萌抵，就會延長整個頁面的交互就緒時間找御。所以事件委托的好處就在于大大減少了dom操作的次數(shù)，提高性能绍填。 - 事件委托原理
利用事件冒泡原理霎桅，就是從事件最深的節(jié)點開始，逐步向上傳播事件讨永。
eg:div > ul > li > a想要給a加一個點擊事件時滔驶，它的執(zhí)行順序就是
a> li >ul > div,給里面的元素a,li,ul添加事件時，最后都會冒泡到最外層的div上住闯，所以都會觸發(fā)瓜浸，委托它們的父級代替它們執(zhí)行。 - 事件委托怎么寫比原？
Event對象提供了一個屬性叫target插佛，可以返回事件的目標(biāo)節(jié)點，稱為事件源量窘，也就是說雇寇，target就可以表示為當(dāng)前的事件操作的dom，但是不是真正操作dom，當(dāng)然锨侯，這個是有兼容性的嫩海，標(biāo)準(zhǔn)瀏覽器用ev.target，IE瀏覽器用event.srcElement囚痴，此時只是獲取了當(dāng)前節(jié)點的位置叁怪，并不知道是什么節(jié)點名稱，所以還要用nodeName來獲取具體是什么標(biāo)簽名深滚，這個返回的是一個大寫的奕谭，我們需要轉(zhuǎn)成小寫（toLowerCase（））再做比較
兼容性寫法:
function (event) {
let ev = event || window.event;
let target = ev.target || ev.srcElement;
}
下面看例子吧：
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
要給上述的每個li一個點擊事件，顯示字符串123痴荐。
- 基礎(chǔ)方法：需要遍歷這個li的對象集合血柳，然后給每個li綁定點擊事件
window.onload = function(){
const ul= document.getElementById("ul");
const li = ul.getElementsByTagName('li');
for(let i=0; i<aLi.length; i++){
li[i].onclick = function(){
console.log(123);
}
}
}
- 父級ul做事件處理，觸發(fā)點擊事件（但不是點擊每個結(jié)點觸發(fā)的事件）
window.onload = function () {
const ul = document.getElementById("ul");
ul.onclick = function () {
alert("1234");
}
}
- 事件委托生兆，給父級綁定事件难捌，但當(dāng)點擊每個結(jié)點時才觸發(fā)事件
window.onload = function () {
const ul = document.getElementById("ul");
ul.onclick = function (event) {
let target = event.target;
if(target.nodeName.toLowerCase() === 'li'){
console.log("1234");
console.log(target.innerHTML);
}
}
}
上面的例子應(yīng)該很清晰的可以看出事件委托的優(yōu)點了，減少了遍歷和dom操作的次數(shù)鸦难。
對于不同的dom操作如何用事件委托呢根吁？下面再來看個例子，更加深的體會一下吧明刷。
<div id="box">
<input type="button" value="添加" id="add">
<input type="button" value="刪除" id="remove">
<input type="button" value="選擇" id="chose">
<input type="button" value="移動" id="move">
</div>
要實現(xiàn)點擊對應(yīng)的按鈕婴栽，顯示他要執(zhí)行的操作。
- 基本方法: 給每個按鈕都綁定相應(yīng)的點擊事件
var add = document.getElementById("add");
var remove = document.getElementById("remove");
var move = document.getElementById("move");
var chose = document.getElementById("chose");
add.onclick = function(){
alert('添加');
};
remove.onclick = function(){
alert('刪除');
};
move.onclick = function(){
alert('移動');
};
chose.onclick = function(){
alert('選擇');
}
}
- 事件委托:給父級元素綁定點擊事件辈末，點擊不同的按鈕愚争，通過選擇，觸發(fā)事件
window.onload = function () {
const box = document.getElementById("box");
box.onclick = function (event) {
let target = event.target;
switch (target.id.toLowerCase()) {
case 'add':
console.log('添加');
break;
case 'remove':
console.log('刪除');
break;
case 'chose':
console.log('選擇');
break;
case 'move':
console.log("移動");
break;
}
}
}
通過這個例子就更清晰的看出事件委托挤聘，減少了綁定事件的dom操作轰枝。
emmm..下面這個例子就是創(chuàng)建新節(jié)點，并給新節(jié)點綁定相同的事件
<input type="button" value="添加" id="add">
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
要求鼠標(biāo)放上去為紅色组去，離開為黃色鞍陨，添加新節(jié)點，也要有這些事件
- 基本方法：對每一個
li標(biāo)簽進行遍歷操作从隆，注意要想新節(jié)點要有這些事件诚撵，得將原有的事件封裝成一個方法，創(chuàng)建新節(jié)點后键闺，調(diào)用此方法寿烟。
window.onload = function () {
const ul = document.getElementById("ul");
const li = document.getElementsByTagName('li');
const btn = document.getElementById("add");
function addNew() {
for(let i = 0;i<li.length;i++){
li[i].onmouseover = function () {
this.style.backgroundColor = 'red';
};
li[i].onmouseout = function () {
this.style.backgroundColor ='yellow';
}
}
}
btn.onclick = function () {
let one = document.createElement('li');
one.innerText = '555';
ul.appendChild(one);
addNew();
};
}
- 事件委托：給父元素綁定事件，點擊子元素觸發(fā)事件辛燥，新產(chǎn)生的節(jié)點筛武，也可以擁有相同的事件缝其，不需要別的操作
window.onload = function () {
const ul = document.getElementById("ul");
const li = document.getElementsByTagName('li');
const btn = document.getElementById("add");
ul.onmouseover = function (event) {
let target = event.target;
if(target.nodeName.toLowerCase() === 'li')
target.style.backgroundColor = 'red';
};
ul.onmouseout= function (event) {
let target = event.target
if(target.nodeName.toLowerCase() === 'li')
target.style.backgroundColor = 'yellow';
};
btn.onclick = function () {
let one = document.createElement('li');
one.innerText = '555';
ul.appendChild(one);
};
};
寫了這么多例子，應(yīng)該很清晰了徘六。
事件委托其實并不是所有的事件都適合用内边。
適合用事件委托的事件：click，mousedown待锈，mouseup漠其，keydown，keyup竿音，keypress辉懒。
但是其中mouseover和mouseout都有位置計算問題，所以也不建議使用谍失。
可以參考：js事件委托或事件代理詳解
