事件委托，附实例

最新推荐文章于 2020-01-06 21:43:15 发布

转载最新推荐文章于 2020-01-06 21:43:15 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xutongbao/p/9924987.html

文章标签：

#javascript #ViewUI

本文介绍了事件委托的概念及其在实际开发中的应用。通过一个简单的HTML列表示例，展示了如何使用事件委托来减少事件监听器的数量，提高代码效率。同时，提供了jQuery和原生JS两种实现方式。

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

事件委托是通过事件冒泡的原理，只需要给父级绑定一个事件监听，即可让每个子节点都绑定上相应的事件。

也可以利用这个方法给动态添加的元素绑定事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <ul id="wrap">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script type="text/javascript">
        $(function(){
            // 普通事件
            $('li').click(function(){
                $(this).css('background', '#D4DFE6');
            });

            // jQuery的on的写法
            $('#wrap').on('click', 'li', function(ev) {
                // this 指向委托的对象 li
                $(this).css('color', 'red');
            });

            // js原生写法
            var _wrap = document.getElementById('wrap');
            _wrap.addEventListener('click', function(ev){
                var ev = ev || event;
                if( ev.target.nodeName == 'LI' ) {
                    ev.target.style.border = '2px solid green';
                }
            });

        });
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/xutongbao/p/9924987.html