【博学谷学习记录】超强总结,用心分享| jQuery 事件处理

发布于:2022-11-06 ⋅ 阅读:(415) ⋅ 点赞:(0)

大家好,这周来了解一下jQuery事件处理。因为普通注册事件方法的不足,jQuery又开发了多个处理方法,如:

             on(): 用于事件绑定,目前最好用的事件绑定方法

             off(): 事件解绑

             trigger() / triggerHandler(): 事件触发

事件处理 on() 绑定事件

由于普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

 

演示代码

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>
​
    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托(委派)
            // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
​
            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

事件处理 off() 解绑事件

 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点介绍 off() ;

事件处理 trigger() 自动触发事件

以上就是我们介绍的全部内容啦,谢谢大家

 

 


网站公告

今日签到

点亮在社区的每一天
去签到