15-jquery 事件委托

事件委托就是利用事件冒泡原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提供性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法：

 有5个li，所以这个click()事件其实是绑定了5次，比较损耗性能

$(function(){
    $ali = $("#list li");
    $ali.click(function(){
        $(this).css({background:'red'});
    })
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

 事件委托：

//delegate()中的第一个参数是被委托的子元素，第二个参数是委托的事件，第三个就是函数了
$('.list').delegate('li','click',function(){
    ...
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list{
            background-color: gold;
            list-style: none;
            padding:10px;
        }

        .list li{
            height:30px;
            background-color: green;
            margin:10px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            /*
            
            //因为有8个li，所以这个click事件其实是绑定了5次，影响性能

            $('.list li').click(function(){
                $(this).css({background:'red'})
            })

            
            //下面是添加一个新的li到ul
            //1、由于ul中的8个li绑定click事件时，还没有这个li，所以这个li没有click的事件

            //新建一个li元素赋值给变量$li
            var $li = $('<li>9</li>');

            //2、为了让新加入的li有同样的事件，需要再单独绑定：
            $li.click(function(){
                $(this).css({background:'red'})
            })


            //把新建的li元素放到ul子集的最后面
            $('.list').append($li)

            */


            
            //改成事件委托的方式：
            //将事件绑定到上级(ul)上,不论有多少li，都只邦一次
            $('.list').delegate('li','click',function(){
                //$(this)指的是每次委托的元素(li)，不是ul
                $(this).css({background:'red'})
            })
            
            //而事件委托因为事件是绑定在父级上的，所以新添加的子元素依然有相同的事件
            var $li = ('<li>9</li>')
            $('.list').append($li)




        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

 

posted @ 2019-03-30 18:48  greenfan  阅读(123)  评论(0)    收藏  举报