Jquery事件的绑定和解绑

最新推荐文章于 2023-02-09 10:23:19 发布

木的理想

最新推荐文章于 2023-02-09 10:23:19 发布

阅读量188

点赞数

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_43401687/article/details/107100074

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. Jquery事件的绑定

绑定的两种方式

eventName(function{});
这种方式绑定的效率高，其中Jquery的部分事件没有实现

2.on(eventName ,function(){})；
这种绑定方式的效率低，但是所有的Jquery事件都已经实现
注意点：两种绑定方式都可以添加多个相同或者不同的事件，不会发生事件覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-jQuery事件绑定</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
          
             
            // $("button").click(function () {
            //     alert("hello lnj");
            // });
            // $("button").click(function () {
            //     alert("hello 123");
            // });
            // $("button").mouseleave(function () {
            //     alert("hello mouseleave");
            // });
            // $("button").mouseenter(function () {
            //     alert("hello mouseenter");
            // });
            $("button").on("click", function () {
                alert("hello click1");
            });
            $("button").on("click", function () {
                alert("hello click2");
            });
            $("button").on("mouseleave", function () {
                alert("hello mouseleave");
            });
            $("button").on("mouseenter", function () {
                alert("hello mouseenter");
            });
        });
    </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

2. Jquery事件的解绑

解绑函数：off（）

off()函数中的参数不同，会导致解绑的情况不同

参数为零个的时候
会将指定元素绑定的所有事件都解除绑定
当参数为一个的时候
会将指定元素的指定事件类型的所有事件都解除绑定
当传递参数为两个的时候
会解除指定事件类型的指定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-jQuery事件移除</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            function test1() {
                alert("hello lnj");
            }
            function test2() {
                alert("hello 123");
            }
            // 编写jQuery相关代码
            $("button").click(test1);
            $("button").click(test2);
            $("button").mouseleave(function () {
                alert("hello mouseleave");
            });
            $("button").mouseenter(function () {
                alert("hello mouseenter");
            });
            // off方法如果不传递参数, 会移除所有的事件
            // $("button").off();
            // off方法如果传递一个参数, 会移除所有指定类型的事件
            // $("button").off("click");
            // off方法如果传递两个参数, 会移除所有指定类型的指定事件
            $("button").off("click", test1);
        });
    </script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>

木的理想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery事件的绑定和解绑

1. Jquery事件的绑定绑定的两种方式eventName(function{});这种方式绑定的效率高，其中Jquery的部分事件没有实现2.on(eventName ,function(){})这种绑定方式的效率低，但是所有的Jquery事件都已经实现注意点：两种绑定方式都可以添加多个相同或者不同的事件，不会发生事件覆盖<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫

专栏目录