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()比较