看本篇文章之前建议先看这篇：Mr.J-- jQuery学习笔记(九)--事件绑定&移除&冒泡
也可以看我的专栏：Mr.J--jQuery学习
定义和用法
trigger() 方法触发被选元素的指定事件类型。
触发事件
规定被选元素要触发的事件。
语法
复制代码1$(selector).trigger(event,[param1,param2,...])
| 参数 | 描述 |
|---|---|
| event | 必需。规定指定元素要触发的事件。 可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。 |
| [param1,param2,...] | 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。 |
页面渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<!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.事件冒泡
1
2
3
4
5
6
7
8
9$(".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") 时 会进行两次输出：
同理：
1
2$(".son").trigger("click"); $(".son").triggerHandler("click");
上述代码结果应该很快就能知道。
2.默认事件
1$("input[type='submit']").trigger("click");
当运行这段代码的时候，会直接弹窗进入：
1$("input[type='submit']").triggerHandler("click");
本段代码运行结果：
点击a标签之后才会进行页面的跳转，阻止了默认事件的发生。
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
3.自定义事件
使用 Event 对象来触发事件
规定使用事件对象的被选元素要触发的事件。
语法
复制代码1$(selector).trigger(eventObj)
| 参数 | 描述 |
|---|---|
| eventObj | 必需。规定事件发生时运行的函数。 |
自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
demo实例：
1
2
3
4$(".son").on("myClick", function () { alert("son"); }); $(".son").triggerHandler("myClick");
运行代码：
4.事件命名空间
1
2
3
4
5
6
7$(".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()面试题
1
2
3
4
5
6
7
8
9$(".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
1$(".son").trigger("click.ls");
运行结果：
利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
（2）.Other demo
1$(".son").trigger("click");
运行结果：
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
最后
以上就是拼搏丝袜最近收集整理的关于Mr.J-- jQuery学习笔记(十)--trigger方法详解的全部内容，更多相关Mr.J--内容请搜索靠谱客的其他文章。
发表评论 取消回复