js事件代理

最新推荐文章于 2024-06-10 17:00:16 发布

weixin_43370067

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量113

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43370067/article/details/106906707

版权

本文探讨了JavaScript中的事件委托技术，通过将事件监听器添加到父元素，实现在子元素上触发事件时进行处理。这种方法的优势在于，即使在内容动态添加后，新子元素依然能响应事件，减少了内存消耗和事件处理的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将事件添加到父元素身上，当事件发生的时候，父元素会找到对应触发事件的子元素去处理，后期添加的子元素也有这个效果

  <script>
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function(ev){
            var oEvent = window.event||ev;
            var target = oEvent.target || oEvent.srcElement;
            if(target.nodeName === 'LI'){
                target.style.background = 'pink';


            }

        }
        ul.innerHTML += '<li>6</li>';
    </script>

    <ul>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
        <li>事件代理</li>
    </ul>