专栏首页Devops专栏jquery 事件委托 - delegate()

jquery 事件委托 - delegate()

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

一般绑定事件的写法

$(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>

这种直接绑定#list li的写法,其实就是绑定了5次li标签。这样的多次绑定是比较消耗性能的。

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', '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>

这种写法是绑定#list节点,用于监听从子节点li的事件冒泡事件。这样只需要绑定父节点#list,既节省性能,也可以解决一个新增子节点的问题。

下面来写写示例,演示一下。

首先编写呈现绑定#list li的示例

当点击li标签的时候,则设置backgroundColorred,如下:

这个示例有一个缺点,如果后面再创建一个li标签,那么此时这个新增的li标签就没有这个click()事件。

click()事件后面创建一个li标签

如果需要在#list内部的最后加上一个li标签,可以使用append()方法。

因为这个最后第6个li标签是在绑定click()事件之后创建的,所以这种写法,怎么点击第6个li标签都不会触发click()事件。

改写使用事件委托的方式,则第6个li标签可以触发click事件

采用父节点#list使用事件委托的方法,可以绑定新增的click()节点事件。因为这个是利用事件冒泡的原来来实现的。 如果点击#list下任何li,这样的话都会出现一个click()事件冒泡至#list,此时#list再进行处理即可。

示例完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $("#list li").click(function(){
            //  $(this).css({"backgroundColor":"red"});
            // })

            $("#list").delegate("li","click",function(){
                $(this).css({"backgroundColor":"red"});
            })

            var $li = $('<li>6</li>');

            $("#list").append($li);
        })
    </script>
    <style type="text/css">
        #list{
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- ul#list>li{$}*5 -->
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery循环 each()

    对jquery选择的对象集合分别进行操作,需要用到jquery循环操作,此时可以用对象上的each方法:

    Devops海洋的渔夫
  • JavaScript 使用getElementsByTagName获取元素

    可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作...

    Devops海洋的渔夫
  • html 有序列表、无序列表、自定义列表

    HTML有一个特殊元素,用于创建ordered lists(有序列表), 或数字编号列表。 有序列表以<ol>元素开始,并包含一个或多个<li>元素。 例如...

    Devops海洋的渔夫
  • 隔行变色

    河湾欢儿
  • <li>标签

    <li> 标签定义列表,<li> 元素通常与有序列表 (<ol>) 和无序列表 (<ul>) 一起运用。

    Html5知典
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study

扫码关注云+社区

领取腾讯云代金券