事件委托，附实例

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

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


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


posted @ 2017-08-29 13:10  徐同保  阅读(136)  评论(0)  编辑  收藏  举报