在制作网页特效时,我们有时会需要使用到模拟操作,即模拟人工手动操作。这时,我们会想到JQuery中的模拟操作方法trigger()和triggerHandler()这2个方法。这2个方法都能够简单实现模拟人工手动操作,那么它们有什么区别呢?下面,我们就通过一个简单案例来介绍一下它们的区别,这个案例效果:刷新页面,就会自动模拟点击按钮效果,弹出提示。
首先,新建一个页面,在页面中添加如下html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> *{padding:0; margin:0;} .hi{background:red;width:100px;height:100px; position:relative;} </style> <script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="hi"> <form action="http://wanlimm.com" > <input type="submit" value="aaa" /> <input type="submit" value="bbb" /> </form> </div> </body> </html>
这段HTML代码的表单,有2个按钮,它们的值分别是“aaa”和“bbb”,现在点击这2个按钮中的任意一个,都会都得到http://wanlimm.com页面。
然后,在<script type="text/javascript"></script>之间添加发下 JS 代码:
$(function(){ $(":submit").click(function(e){ alert($(this).val()); }).trigger('click'); });
这里,我们用到的trigger方法,刷新这个页面,会有2次弹窗,分别显示“aaa”和“bbb”,然后会自动使用表单行为自动跳转到http://wanlimm.com这个页面。
如果把trigger换成triggerHandler ,就只会有1次弹窗,而且屏蔽表单行为,不会自动跳转到http://wanlimm.com页面。
我们再把html代码中的标蓝的form代码去掉,然后,再在JS代码中连缀方法CSS,如下:
$(function(){ $(":submit").click(function(e){ alert($(this).val()); }).trigger('click').css('color','red'); });
我们刷新页面时,2次弹窗后,按钮中的文字会变成红色。但是,如果把 trigger 改成 triggerHandler 后,刷新页面后,只会1次弹窗,而不会文字变红。
综上总结 trigger 与 triggerHandler 的区别:
1、triggerHandler()方法并不会触发事件的默认行为,而trigger()会。
2、triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。
3、triggerHandler()方法不能连缀其它方法,因为它返回的是当前事件执行的返回值,而不是对象;trigger()可以连缀其它方法,因为它返回当前包含事件触发元素的 jQuery 对象。
4、triggerHandler()在创建事件的时候,不会冒泡。trigger()会冒泡,但这种冒泡是自定义事件才能体现出来。
以上就是JQuery通过简单示例比较trigger()与triggerHandler()的区别的详细内容,更多请关注Work网其它相关文章!