jQuery事件注册及处理

最新推荐文章于 2024-05-18 18:58:15 发布

好奇的布偶猫

最新推荐文章于 2024-05-18 18:58:15 发布

阅读量300

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45785652/article/details/106578379

版权

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

演示代码

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

1.2. jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

1.2.1 事件处理 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>

好奇的布偶猫

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件注册及处理

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。语法演示代码<body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function(
复制链接

扫一扫