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

Posted on by

簡介

說明

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

事件委托簡介

事件委托，也叫事件代理，是JavaScript中綁定事件的一種常用技巧。就是將原本需要綁定在子元素的響應事件委托給父元素或更外層元素，讓外層元素擔當事件監聽的職務。

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

事件委托的優點

1.節省內存，減少事件的綁定

原本需要綁定在所有子元素的事件，使用事件委托之後，隻需要一個事件綁定即可。

2.可以動態綁定事件，新增的子對象事件可以被已綁定的事件處理

因為新增的子對象產生的事件，最終也會冒泡到父元素，從而能夠處理

示例：事件委托

需求：一個列表，點擊列表元素時彈出其內容。

寫法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>
    <li>我是第2個li</li>
    <li>我是第3個li</li>
</ul>
 
<script>
    let ul = document.getElementById('id-ul');
    ul.addEventListener("click", function (ev) {
        alert(ev.target.innerText);
    })
</script>
 
</body>
</html>

結果

寫法2：每個子元素都綁定事件

每個子元素都綁定事件。

<!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>
    <li>我是第2個li</li>
    <li>我是第3個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>

結果

示例：新增元素

需求：每點擊“生成按鈕”，就生成一個子的列表元素。然後，每點擊一次列表元素，會彈出其內容。

寫法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>

結果

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

寫法2：每個子元素都綁定事件

<!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>

結果

可以看到：原有的元素的點擊事件會被處理，但新加入的不會被處理。 

到此這篇關於JavaScript事件的委托(代理)的用法示例詳解的文章就介紹到這瞭,更多相關JavaScript事件委托內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：