JQuery 的trigger()方法【点击一个按钮,实现另一个按钮的点击事件】
程序员文章站
2022-05-06 08:02:21
...
1、前阶段需要点击一个按钮然后触发另一个元素的点击事件,当时找了度娘,发现了trigger这个方法,哎,这么好用的方法我竟然之前不知道,至此记录一下;
2、trigger()方法:
- trigger()方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
- 该方法与triggerHandler()方法类似,不同的是triggerHandler()不触发事件的默认行为。
先不说他们两个的区别,先说一下trigger()方法:
1)trigger()的语法:$(selector).trigger(event,eventObj,param1,param2,…)
参数 | 描述 |
---|---|
event | 必需,规定指定元素上要触发的时间。可以是自定义事件,或者任何标准事件。 |
param1,param2,param3… | 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。 |
3、首先写一个小demo解决上面的需求:
我们实现点击一个按钮,然后系统去点击我们定义好的一个div。
<button id="div2" type="submit">点我就对了</button>
<div id="div1"></div>
<script>
window.onload=function(){
$("#div2").click(function(){
$("#div1").trigger('click');
});
$("#div1").click(function(){
alert("div被点击了");
});
}
</script>
其实trigger()方法不仅仅是实现点击事件,任何事件都可以,特别的强大。
4、trigger()与triggerHandler()的不同之处:
- triggerHandler()不会引起事件(比如表单提交)的默认行为。
- trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只影响第一个匹配元素。
- 由triggerHandler()创建的事件不会在DOM树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
可以看一下菜鸟教程上的实例:有关trigger()和triggerHandler()的实例
你要去做一个大人,不要回头,不要难过。
“如果工作只是因为无聊才找点事做,而不是为了恰饭。那该多好。”