jquery的trigger()和triggerHandler()的使用和深入理解

一、使用

trigger:扳机;起因,引起反应的事;触发器
当一个函数或方法执行的时候,可以引起某个dom的默认或自定义事件的触发;需要注意的是,事件触发的时候总会伴随一系列function,即事件处理函数。
trigger的使用
(1)参数event:默认事件(click、focus、blur等)或自定义事件
(2)trigger(event, [param1,param2,...paramN])
trigger后面的参数需要用数组传递,但是事件的处理函数在接收的时候,不是用数组接收,这点需要注意
(3)trigger触发的事件也会冒泡

        $("#trigger").click(function(){
            $('input').trigger('click', [param1,param2,...paramN]);
        })
        $('input').on('click',function(e,param1,param2,...paramN){
            console.log(arguments);
        })

triggerHandler的使用

    <input type="radio">
    <input type="checkbox">
    <button id="triggerHandler">triggerHandler</button>
    
        <script>
        var t = $("#trigger");
        var th = $("#triggerHandler");
        
        $("#triggerHandler").on('click',function(){
            $('input').trigger('click');
        })
        $('input').eq(0).on('click',function(){
            alert(111);
        })
        $('input').eq(1).on('click',function(){
            alert(222);
        })
    </script>

(1)只会触发$('input')匹配到的dom中的第一个('input').eq(0)
(2)不会触发浏览器的默认行为
(3)不会冒泡
注意事项

  1. 有的默认事件无法传参数,比如:focus事件,测试的时候发现无法传递参数,测试click、blur事件可以传递参数;
  2. trigger虽然可以触发浏览器的默认行为,比如单选框复选框的click事件,input输入框的focus聚焦;但有的默认行为却不能触发,比如按钮的click,页面上就不会出现真正的鼠标点击按钮的效果;

trigger和triggerHandler的特点与不同:

  1. 都能够触发jquery绑定的事件,通过“live、on、bind”等;
  2. 都能够触发jquery绑定事件的处理函数;
  3. trigger能够触发浏览器事件的默认行为,比如输入框的聚焦、单选框复选框的选中;而triggerHandler不能;
  4. trigger方法会触发所有匹配到的dom对象上绑定的对应的事件;而triggerHandler则只会触发匹配到的第一个dom对象的对应事件;
  5. trigger方法触发的事件会冒泡;而triggerHandler不会冒泡;
  6. trigger方法返回的jquery对象,可以链式调用;但triggerHandler返回的不是jquery对象;

trigger和triggerHandler使用遇到问题:

  1. 参考文章(2)中提到的问题:浏览器的默认行为和事件处理函数的先后关系,比如复选框的浏览器默认行为是复选框出现勾或取消勾的效果,事件处理函数是点击复选框时function要做什么。我用jquery1.10.2测试的时候,发现:浏览器的默认行为在事件处理函数之后发生。即不管是点击复选框还是通过trigger触发复选框的点击事件,都会先执行事件的处理函数,后触发浏览器的默认效果。
        $("#trigger").on('click',function(){
            $('input').trigger('click');
        })
        $('input').on('click',function(){
            alert(this.checked);
            //事件处理函数结束后,才会触发浏览器的默认行为
        })

trigger可以触发多个dom对象的对应的事件,同样的,在多个dom的处理事件执行结束后,页面上才会触发浏览器的默认行为(比如单选框、复选框同时出现选中效果)

2.trigger无法触发hover事件,参考文章(3)提的问题
我觉得是因为hover事件包括了mouseenter和mouseleave两个事件,trigger('hover')无法判断是mouseenter还是mouseleave,所有无法触发。

阻止浏览器的默认行为:
在事件处理函数执行结束后,用return false阻止浏览器默认行为的发生
return false;阻止冒泡和事件默认行为
event.stopPropagation()阻止事件冒泡
event.preventDefault();阻止事件默认行为

        $("#trigger").on('click',function(){
            $('input').trigger('click');
        })
        $('input').on('click',function(){
            alert(this.checked);
            return false;
            //事件处理函数结束后,不会触发浏览器的默认行为
        })

参考文章

(1)jQuery 源码系列(十四)自定义事件
(2)jQuery事件模型之默认行为执行顺序,以及trigger()与 triggerHandler()比较

阅读 140

推荐阅读