jQuery中常用的事件处理方法（click、mouseover、mouseout、bind、one、live、unbind）

最新推荐文章于 2023-01-04 10:47:45 发布

Keeling1720

最新推荐文章于 2023-01-04 10:47:45 发布

阅读量796

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118379885

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

文章目录

jQuery中常用的事件处理方法

jQuery中常用的事件处理方法

click

作用：用于绑定单击事件以及触发单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定
            $("h5").click(function () {
                alert("h5被点击事件触发");
            });

            //触发
            $("button").click(function () {
                $("h5").click();
            })

        })
    </script>
</head>
<body>
    <div>
        <h5 style="background-color: #bfa">点我触发绑定事件</h5>
        <button>点我触发h5点击事件</button>
    </div>
</body>
</html>

在这里插入图片描述
单击h5标签或者按钮触发h5绑定的事件：

注意：之前讲DOM的时候其实有还有用过onblur、onchange方法其实跟onclick一样，在jQuery下，已经演化成他的一个方法，blur、change，用法跟click一样。

mouseover

鼠标移入事件，用法和click一样

mouseout

鼠标移出事件，用法也和click一样

bind

可以给元素一次性绑定一个或多个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定单个事件
            $("h5").bind("mouseover mouseout",function () {
                console.log('鼠标刚才摸了我一下');
            });

            //绑定多个事件
            $("button").bind("click",function () {
                console.log("我被鼠标戳了一下");
            });
        })
    </script>
</head>
<body>
<div>
    <h5 style="background-color: #bfa">点我触发绑定事件</h5>
    <button>点我触发h5点击事件</button>
</div>
</body>
</html>