JQuery 课时13：JQuery绑定事件处理器

最新推荐文章于 2022-08-17 22:21:11 发布

卷毛崽

最新推荐文章于 2022-08-17 22:21:11 发布

阅读量114

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42221321/article/details/118469076

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了JQuery中事件处理的几种方法，包括已不推荐使用的bind，以及delegate和on的事件委托。重点讲解了on的多功能性和使用方式，包括如何绑定多个事件和事件委托。同时提到了off()用于移除事件，one()用于事件只执行一次的场景。文章通过实例展示了这些方法的用法和效果。

摘要由CSDN通过智能技术生成

1、bind()–不推荐使用了，建议用on

bind()给元素绑定一个事件
bind(事件类型，处理函数即function,布尔值（false为阻止冒泡事件，true为冒泡事件）)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        $(function(){
            // bind(事件类型，处理函数即function,布尔值（false为阻止冒泡事件，true为冒泡事件）)
            $("#btn").bind("click",function(){
                alert("haha");
            })
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述
可以同时使用多个事件类型

    <script>
        $(function(){
            $("#btn").bind({
                click:function(){
                    alert("click");
                },
                mouseover:function(){
                    alert("moveover");
                }
            })
        })
    </script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        p{
            width: 100px;
            height: 50px;
            background-color: darkgreen;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
            color: #ffffff;
            font-size: 20px;
        }
        .pbtn{
            background-color: green;
        }
    </style>
</head>
<body>
    <p>按钮</p>
    <script>
        $(function(){
            // 用jquery实现按钮移出移入效果
            $("p").bind({
                mouseover:function(){
                    $(this).addClass("pbtn");
                },
                mouseout:function(){
                    $(this).removeClass("pbtn");
                }

            })
        })
    </script>
</body>
</html>

效果：jquery实现按钮鼠标移动效果
在这里插入图片描述

简化代码写法
toggleClass()在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在或值切换属性

    <script>
        $(function(){ 
            $("p").bind("mouseover mouseout",function(){
                // toggleClass()在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在或值切换属性
                $(this).toggleClass("pbtn");
            })
        })
    </script>

2、delegate（）事件委托，建议用on

delegate（选择器，事件类型，处理函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
<script>
    $(function(){
        // delegate()事件委托，三个参数：选择元素，事件类型，处理函数
        $("ul").delegate("li","click",function(){
            alert($(this).html());
        })
    })
</script> 
</body>
</html>

效果：点击li标签弹出对应内容
在这里插入图片描述

3、on（）

on 在选定的元素上绑定一个或多个处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button id="btn">button</button>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
    <p>haha</p>
    <script>
        $("#btn").on("click",function(){
            alert("haha");
        })
        // 事件委托，主义三个参数顺序是事件类型，选择元素，处理函数
        $("ul").on("click","li",function(){
            alert($(this).html());
        })
        // 同时监听多个事件
        $("p").on("mouseover mouseout",function(){
            alert("haha");
        })
    </script>    
</body>
</html>

效果：使用on（）实现上面两个的效果，并演示多个事件绑定写法
在这里插入图片描述

4、off()

与on相对应，只能移除on的事件
off(移除的事件类型，移除对象，移除的处理函数)
$(“div”).off();如果什么都不加，为移除所有的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button id="btn">button</button>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
    <div>

        <p>haha</p>
    </div>
    <script>
        var fn=function(){
            alert("hah");
        }
        $("div").on("click mouseover","p",fn);
        // 移除的事件类型，移除对象，移除的处理函数
        $("div").off("mouseover","p",fn);
        // $("div").off();如果什么都不加，为移除所有的事件
        // 
    </script>    
</body>
</html>

one()

one(事件类型，处理函数)
== 对元素的事件添加处理函数，处理函数在每个元素上，每种事件类型最多执行一次，常用于引导页==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 对元素的事件添加处理函数，处理函数在每个元素上 ，每种事件类型
    最多执行一次，常用于引导页-->
    <p>hahah</p>
    <script>
        $(function(){
            $("p").one("click",function(){
                alert('hahha');
            })
        })
    </script>
</body>
</html>