Mr.J-- jQuery学习笔记(十)--trigger方法详解

最新推荐文章于 2020-07-12 23:43:40 发布

End_less__

最新推荐文章于 2020-07-12 23:43:40 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/91603086

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了jQuery中的trigger方法，包括定义和用法、事件触发、事件冒泡、默认事件处理、自定义事件、使用Event对象触发事件、事件命名空间的应用，以及trigger在面试中的常见问题和示例，帮助读者深入理解jQuery事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看本篇文章之前建议先看这篇：Mr.J-- jQuery学习笔记(九)--事件绑定&移除&冒泡

也可以看我的专栏：Mr.J--jQuery学习

定义和用法

trigger() 方法触发被选元素的指定事件类型。

触发事件

规定被选元素要触发的事件。

语法

$(selector).trigger(event,[param1,param2,...])

参数	描述
event	必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]	可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

参数

描述

event

必需。规定指定元素要触发的事件。

可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。

[param1,param2,...]

可选。传递到事件处理程序的额外参数。

额外的参数对自定义事件特别有用。

页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="https://blog.csdn.net/Ms_yjk/article/details/91436375">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

1.事件冒泡

$(".son").click(function (event) {
                alert("son");
            });

            $(".father").click(function () {
                alert("father");
            });
           //  $(".father").trigger("click");
             $(".father").triggerHandler("click");

trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡

当进行 $(".father").triggerHandler("click") 时，点击father div只会出现：

但是进行 $(".father").trigger("click") 时会进行两次输出：

同理：

$(".son").trigger("click");
$(".son").triggerHandler("click");

上述代码结果应该很快就能知道。

2.默认事件

$("input[type='submit']").trigger("click");

当运行这段代码的时候，会直接弹窗进入：

 $("input[type='submit']").triggerHandler("click");

本段代码运行结果：

点击a标签之后才会进行页面的跳转，阻止了默认事件的发生。

trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为

3.自定义事件

使用 Event 对象来触发事件

规定使用事件对象的被选元素要触发的事件。

语法

$(selector).trigger(eventObj)

参数	描述
eventObj	必需。规定事件发生时运行的函数。

自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发

demo实例：

$(".son").on("myClick", function () {
    alert("son");
});
$(".son").triggerHandler("myClick");

运行代码：

4.事件命名空间

            $(".son").on("click.zs", function () {
                alert("click1");
            });
            $(".son").on("click.ls", function () {
                alert("click2");
            });
            $(".son").trigger("click.ls");

想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件

上述demo运行结果：

通过更改trigger()里面的参数，可以调用已经定义的事件

5.trigger()面试题

            $(".father").on("click.ls", function () {
                alert("father click1");
            });
            $(".father").on("click", function () {
                alert("father click2");
            });
            $(".son").on("click.ls", function () {
                alert("son click1");
            });