javascript 事件委托

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>点我,我就变颜色</li>
    <li>点我,我就变颜色</li>
    <li>点我,我就变颜色</li>
    <li>点我,我就变颜色</li>
</ul>
<script>

    // 事件委托原理 给父节点 添加侦听器  利用事件冒泡原理 来影响子节点
    // 事件委托 只对DOM 操作一次  效率更高

    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        e.target.style.backgroundColor = 'pink'; // e.target 获得所点击的子节点
    })

</script>

</body>
</html>

猜你喜欢

转载自www.cnblogs.com/nigori/p/10765035.html