6.事件委托（冒泡）新加子元素, 同有响应事件$(‘父‘).on(‘click‘,‘子‘,function(){})；$(‘父).delegate(‘子‘,‘click‘,~）删除$(父).off()

最新推荐文章于 2024-07-01 10:46:30 发布

原创最新推荐文章于 2024-07-01 10:46:30 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件委托原理，通过示例代码展示了如何使用`$('ul').on('click', 'li', function () {}

事件委托：

方法1 $('ul').on('click', 'li', function () {})
方法2 $('ul').delegate('li', 'click', function () {})

取消事件委托：

方法1 $('ul').off()
方法2 $('ul').undelegate()

1. 事件委托:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)

    <ul>
        <li>11111</li>
        <li>1111111</li>
        <li>111111111</li>
        <li>11111111111</li>
    </ul>

    <li>22222</li>
    <br>
    <button id="btn1">添加新的li</button>
    <button id="btn2">删除ul上的事件委托的监听器</button>
    <br>
    <script>
        // 没事件委托前：新添加的子元素没有点击变色的事件
        // $('ul li').on('click', function () {
        //     $(this).css('background', 'red')
        // })

        // 事件委托后：新加的有响应事件
        // 方法1
        // $('ul').delegate('li', 'click', function () {
        //     this.style.background = 'skyblue'
        // })
        // 方法2
        $('ul').on('click', 'li', function () {
            $(this).css('background', 'red')
        })
        $('#btn1').on('click', function () {
            $('ul').append('<li>11111111111</li>')
        })

        // 删除事件委托，不变色了
        $('#btn2').on('click', function () {
            // 写法1. $('ul').undelegate()
            // 写法2
            $('ul').off()

        })
    </script>