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

看本篇文章之前建议先看这篇：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");});

（1）.demo

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

运行结果：

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发

（2）.Other demo

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