JavaScript事件的委托(代理)的用法示例詳解

更新時(shí)間：2022年01月04日 09:36:39 作者：IT利刃出鞘

事件委托，也叫事件代理，是JavaScript中綁定事件的一種常用技巧。就是將原本需要綁定在子元素的響應(yīng)事件委托給父元素或更外層元素，讓外層元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。本文將詳細(xì)為大家介紹JavaScript事件委托的用法，需要的可以參考一下

簡介

說明

本文用示例介紹JavaScript中的事件（Event）的委托（代理）的用法。

事件委托簡介

事件委托，也叫事件代理，是JavaScript中綁定事件的一種常用技巧。就是將原本需要綁定在子元素的響應(yīng)事件委托給父元素或更外層元素，讓外層元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。

事件代理的原理是DOM元素的事件冒泡。

事件委托的優(yōu)點(diǎn)

1.節(jié)省內(nèi)存，減少事件的綁定

原本需要綁定在所有子元素的事件，使用事件委托之后，只需要一個(gè)事件綁定即可。

2.可以動(dòng)態(tài)綁定事件，新增的子對象事件可以被已綁定的事件處理

因?yàn)樾略龅淖訉ο螽a(chǎn)生的事件，最終也會(huì)冒泡到父元素，從而能夠處理

示例：事件委托

需求：一個(gè)列表，點(diǎn)擊列表元素時(shí)彈出其內(nèi)容。

寫法1：事件委托

只需在外層元素綁定事件即可。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>我是第1個(gè)li</li>
    <li>我是第2個(gè)li</li>
    <li>我是第3個(gè)li</li>
</ul>
 
<script>
    let ul = document.getElementById('id-ul');
    ul.addEventListener("click", function (ev) {
        alert(ev.target.innerText);
    })
</script>
 
</body>
</html>

結(jié)果

寫法2：每個(gè)子元素都綁定事件

每個(gè)子元素都綁定事件。

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>我是第1個(gè)li</li>
    <li>我是第2個(gè)li</li>
    <li>我是第3個(gè)li</li>
</ul>
 
<script>
    let li = document.querySelectorAll('#id-ul li');
    for (let liElement of li) {
        liElement.addEventListener("click", function (ev) {
            alert(ev.target.innerText);
        });
    }
</script>
 
</body>
</html>

結(jié)果

示例：新增元素

需求：每點(diǎn)擊“生成按鈕”，就生成一個(gè)子的列表元素。然后，每點(diǎn)擊一次列表元素，會(huì)彈出其內(nèi)容。

寫法1：事件委托

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">click</button>
<script>
    let num = 3;
    let eUl = document.querySelector("#id-ul");
    let eButton = document.querySelector("#btn");
 
    eButton.addEventListener("click", function () {
        let newLi = document.createElement("li");
        eUl.appendChild(newLi);
        newLi.innerText = num++;
    })
    eUl.addEventListener("click",function (event) {
        alert(event.target.innerText);
    })
</script>
 
</body>
</html>

結(jié)果

可以看到，原有的元素和新建的元素的事件都會(huì)被處理。

寫法2：每個(gè)子元素都綁定事件

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>
 
<body>
 
<ul id="id-ul">
    <li>1</li>
    <li>2</li>
</ul>
<button id="btn">click</button>
<script>
    let num = 3;
    let eUl = document.querySelector("#id-ul");
    let eButton = document.querySelector("#btn");
    let eLi = document.querySelectorAll("#id-ul li");
 
    eButton.addEventListener("click", function () {
        let newLi = document.createElement("li");
        eUl.appendChild(newLi);
        newLi.innerText = num++;
    })
 
    for (let eLiElement of eLi) {
        eLiElement.addEventListener("click",function (event) {
            alert(event.target.innerText);
        })
    }
 
</script>
 
</body>
</html>

結(jié)果