wordpress CMS主题 微信
Home > JS应用 > JQuery模拟操作trigger()与triggerHandler()的区别

JQuery模拟操作trigger()与triggerHandler()的区别

高时银博客 JS应用 点击: 962 次 0 0
  • 标签:
  • 在制作网页特效时,我们有时会需要使用到模拟操作,即模拟人工手动操作。这时,我们会想到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()会冒泡,但这种冒泡是自定义事件才能体现出来。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509284849.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论