成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

一、是什么

事件代理，俗地來(lái)講，就是把一個(gè)元素響應(yīng)事件（click、keydown......）的函數(shù)委托到另一個(gè)元素

前面講到，事件流的都會(huì)經(jīng)過(guò)三個(gè)階段： 捕獲階段 -> 目標(biāo)階段 -> 冒泡階段，而事件委托就是在冒泡階段完成

事件委托，會(huì)把一個(gè)或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元素，而不是目標(biāo)元素

當(dāng)事件響應(yīng)到目標(biāo)元素上時(shí)，會(huì)通過(guò)事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)

下面舉個(gè)例子：

比如一個(gè)宿舍的同學(xué)同時(shí)快遞到了，一種笨方法就是他們一個(gè)個(gè)去領(lǐng)取

較優(yōu)方法就是把這件事情委托給宿舍長(zhǎng)，讓一個(gè)人出去拿好所有快遞，然后再根據(jù)收件人一一分發(fā)給每個(gè)同學(xué)

在這里，取快遞就是一個(gè)事件，每個(gè)同學(xué)指的是需要響應(yīng)事件的 DOM元素，而出去統(tǒng)一領(lǐng)取快遞的宿舍長(zhǎng)就是代理的元素

所以真正綁定事件的是這個(gè)元素，按照收件人分發(fā)快遞的過(guò)程就是在事件執(zhí)行中，需要判斷當(dāng)前響應(yīng)的事件應(yīng)該匹配到被代理元素中的哪一個(gè)或者哪幾個(gè)

二、應(yīng)用場(chǎng)景

如果我們有一個(gè)列表，列表之中有大量的列表項(xiàng)，我們需要在點(diǎn)擊列表項(xiàng)的時(shí)候響應(yīng)一個(gè)事件

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

如果給每個(gè)列表項(xiàng)一一都綁定一個(gè)函數(shù)，那對(duì)于內(nèi)存消耗是非常大的

// 獲取目標(biāo)元素
const lis = document.getElementsByTagName("li")
// 循環(huán)遍歷綁定事件
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function(e){
        console.log(e.target.innerHTML)
    }
}

這時(shí)候就可以事件委托，把點(diǎn)擊事件綁定在父級(jí)元素ul上面，然后執(zhí)行事件的時(shí)候再去匹配目標(biāo)元素

// 給父層元素綁定事件
document.getElementById('list').addEventListener('click', function (e) {
    // 兼容性處理
    var event = e || window.event;
    var target = event.target || event.srcElement;
    // 判斷是否匹配目標(biāo)元素
    if (target.nodeName.toLocaleLowerCase === 'li') {
        console.log('the content is: ', target.innerHTML);
    }
});

還有一種場(chǎng)景是上述列表項(xiàng)并不多，我們給每個(gè)列表項(xiàng)都綁定了事件

但是如果用戶能夠隨時(shí)動(dòng)態(tài)的增加或者去除列表項(xiàng)元素，那么在每一次改變的時(shí)候都需要重新給新增的元素綁定事件，給即將刪去的元素解綁事件

如果用了事件委托就沒(méi)有這種麻煩了，因?yàn)槭录墙壎ㄔ诟笇拥模湍繕?biāo)元素的增減是沒(méi)有關(guān)系的，執(zhí)行到目標(biāo)元素是在真正響應(yīng)執(zhí)行事件函數(shù)的過(guò)程中去匹配的

舉個(gè)例子：

下面html結(jié)構(gòu)中，點(diǎn)擊input可以動(dòng)態(tài)添加元素

<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

使用事件委托

const oBtn = document.getElementById("btn");
const oUl = document.getElementById("ul1");
const num = 4;
//事件委托，添加的子元素也有事件
oUl.onclick = function (ev) {
    ev = ev || window.event;
    const target = ev.target || ev.srcElement;
    if (target.nodeName.toLowerCase() == 'li') {
        console.log('the content is: ', target.innerHTML);
    }
};
//添加新節(jié)點(diǎn)
oBtn.onclick = function () {
    num++;
    const oLi = document.createElement('li');
    oLi.innerHTML = `item ${num}`;
    oUl.appendChild(oLi);
};

可以看到，使用事件委托，在動(dòng)態(tài)綁定事件的情況下是可以減少很多重復(fù)工作的

三、總結(jié)

適合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress

從上面應(yīng)用場(chǎng)景中，我們就可以看到使用事件委托存在兩大優(yōu)點(diǎn)：

• 減少整個(gè)頁(yè)面所需的內(nèi)存，提升整體性能

• 動(dòng)態(tài)綁定，減少重復(fù)工作

但是使用事件委托也是存在局限性：

• focus、blur這些事件沒(méi)有事件冒泡機(jī)制，所以無(wú)法進(jìn)行委托綁定事件

• mousemove、mouseout這樣的事件，雖然有事件冒泡，但是只能不斷通過(guò)位置去計(jì)算定位，對(duì)性能消耗高，因此也是不適合于事件委托的

如果把所有事件都用事件代理，可能會(huì)出現(xiàn)事件誤判，即本不該被觸發(fā)的事件被綁定上了事件

轉(zhuǎn)自https://www.cnblogs.com/smileZAZ/p/18199581