java script事件委托是什么

小樊
83
2024-06-27 20:48:23
欄目: 編程語言

JavaScript事件委托是一種設(shè)計(jì)模式，通過將事件處理程序添加到一個(gè)父元素而不是給每個(gè)子元素添加事件處理程序來提高性能。當(dāng)子元素觸發(fā)事件時(shí)，事件會(huì)冒泡到父元素，然后通過事件委托的方式來觸發(fā)相應(yīng)的事件處理程序。

通過事件委托，可以減少頁面中事件處理程序的數(shù)量，提高頁面性能。此外，當(dāng)頁面中動(dòng)態(tài)添加或刪除子元素時(shí)，不需要重新綁定事件處理程序，因?yàn)槭录幚沓绦蚴墙壎ㄔ诟冈厣系摹?/p>

示例代碼：

// HTML結(jié)構(gòu)
<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

// JavaScript代碼
document.getElementById('parent-list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('You clicked on item: ' + event.target.innerHTML);
    }
});

在上面的代碼中，我們給父元素 ul 添加了一個(gè)點(diǎn)擊事件處理程序，當(dāng)點(diǎn)擊子元素 li 時(shí)，通過事件委托的方式來觸發(fā)事件處理程序，從而實(shí)現(xiàn)事件委托。

0 踩