jQuery中的.trigger()和.triggerHandler()

103 阅读 0 评论 68 点赞

我是靠谱客的博主英勇早晨，最近开发中收集的这篇文章主要介绍jQuery中的.trigger()和.triggerHandler()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

.trigger()和.triggerHandler()都是模拟用户行为的方法

triggerHandler()在继承trigger()方法功能的基础上添加了一些功能和限制，两者的用法一致；例如：

//.trigger()
$('div').click(function(){
   alert("trigger");
}).trigger('click');

//.triggerHandler()
$('div').click(function(){
   alert("triggerHandler");
}).triggerHandler('click');

在常规的使用情况下，两者几乎没有区别，都是用于模拟用户行为，也可以传递额外参数。但是在一些特殊情况下，会产生差异：

1. .triggerHandler()方法并不会触发事件的默认行为，而.trigger()会

$('form').trigger('submit');//模拟用户的默认行为，并跳转到执行页面
$('form').triggerHandler('submit');//模拟用户执行提交，并且阻止默认行为

注意：其实上面无论用哪种写法表单都会提交，只是.triggerHadler()会阻止submit的默认行为，不会跳转到执行页面
如果我们想用.trigger()来模拟用户提交，并阻止事件的默认行为，需要这样写：

$('form').submit(function(e){
   e.preventDefault();//阻止事件的默认行为
}).trigger('submit');

2. .triggerHandler()方法只会影响到第一个匹配的元素，而.trigger()会影响到所有元素

<script type="text/javascript">
        $(function(){
          $('button').click(function(){
            alert("haha");
          }).triggerHandler('click');

        })
    </script>
</head>
<body>
    <button></button>
    <button></button>
    <button></button>
</body>

上面代码如果使用.trigger()方法会弹出三个选框，如果使用.trigger()方法只会弹出一个选框

3. .triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined,而.trigger()方法则返回当前包含事件触发元素的jQuery对象（可以用于连缀）

$('div').click(function(){
   alert('返回jQuery对象');
}).trigger('click').css('background','pink');
//返回触发元素的div jQuery对象,用于给其设置样式

4. .trigger()在创建事件时候，会冒泡，但是这种冒泡是自定义事件才能体现出来，是jQuery扩展于DOM的机制，并非DOM特性，而.triggerHandler()则不会冒泡,例如：

<script type="text/javascript">
        $(function(){
             $('div').bind('myevent',function(){
                alert("自定义事件");
             });
             $('.box3').trigger('myevent');
        })
    </script>
</head>
<body>
    <div class="box1" style="width:100px;height: 100px;background: gold;">
        <div class="box2" style="width:80px;height: 80px;background: skyblue;">
            <div class="box3" style="width:50px;height: 50px;background: pink;">

            </div>
        </div>
    </div>

当使用.trigger()方法模拟用户操作时，当触发了box3的自定义事件，其外层div绑定的同名自定义事件也会被触发，但是使用.triggerHandler()方法不会发生这种情况

命名空间

对于同名同元素绑定的事件移除会存在麻烦，这个时候我们可以使用事件的命名空间解决

<script type="text/javascript">
        $(function(){
            $('div').bind('click.abc click.xyz',function(){
                alert("我是事件1");
            }).bind('mouseout',function(){
                $(this).css('background','pink');
            });
            $('div').unbind('click.abc');
        })
    </script>
</head>
<body>
    <div class="box1" style="width:100px;height: 100px;background: gold;">

    </div>