jq中trigger和triggerHandler用法

我们经常要在js中手动触发一些事件,比如控制点击某个按钮,通过按钮的click事件执行一些操作等等。

一般情况下我们使用js触发点击事件写法如下:

$('#but').bind('click',function(){
     $('#a_but').click();   //当点击#but时,触发#a_but的点击事件
});

trigger的作用就与上述类似,用于触发一个元素的事件或者状态,例如,使用trigger触发点击事件的写法如下:

$('#but').bind('click',function(){
     $('#a_but').trigger('click');   //与$('#a_but').click()无差别
});
使用trigger可以手动触发执行元素上绑定的事件处理函数,也会 触发执行该元素的默认行为。以表单元素<form>为例,使用$('form').trigger("submit")可以触发该表单绑定的submit事件,也会执行表单submit事件的默认行为——表单提交操作。

但是这里有个例外,链接标签<a>的trigger("click")是一个特例,会触发<a>的点击事件,却不会触发链接click事件的默认行为——跳转到href对应链接的操作。要想跳转链接需要使用js原生的手动触发点击事件的方法:document.getElementbyId('a_id').click(),这样才能触发默认的跳转href链接的行为。

拓展:trigger还可以绑定自定义名称的事件,如下

$('#but1').bind('click',function(){
        $('.but2').trigger('shit');   //自定义名为“shit”的事件并触发
});
$('.but2').bind("shit",function(){    //使用bind绑定“shit”事件的处理函数
        console.log("shit,id="+this.id);
});

trigger与triggerHandler比较:

trigger的兄弟用法是tirggerHandler,用法相同,差别如下:

  1. $(selector).trigger(event)会触发所有selector的event事件,而$(selector).triggerHandler(event)只会触发selector第一个元素的event事件(如果selector为通过id获取的元素则无所谓了)。
  2. $(selector).triggerHandler(event)不会触发事件的默认行为,比如上面说的$('form').trigger("submit"),triggerHandler不会触发表单提交。
  3. 由 $(selector).triggerHandler(event) 创建的selector上的event事件不会在 DOM 树中向上冒泡,因此selector的event不会被外层的元素捕获到,即当不为该selector的event直接执行方法的时候,事件捕获捕获不到该event,就不会执行相应的方法,就什么都不会做。例如:
    <body>
    <button id="but1">first button</button>
    <div id="main">
        <button class="but2" id="one">1 button</button>
        <button class="but2" id="two">2 button</button>
        <button class="but2" id="three">3 button</button>
    </div>
    <script>
        $('#but1').bind('click',function(){
    //        $( "#two" ).trigger( "click" );      //事件可以向上冒泡,下面$('#main').click(function(event){...})可以将其捕获到
            $( "#two" ).triggerHandler( "click" ); //事件不能向上冒泡,故而下面$('#main').click(function(event){...})不可以将其捕获到,当#but1被点击时,就什么都不会发生
        }); 
        $('#main').click(function(event){
            console.log("hehehe!");
            event = event || window.event;
            var obj = event.target || event.srcElement;
            console.log("通过事件捕获触发id="+obj.id);
        });
    </script>
    </body>
    因此使用triggerHandle之后,如果要给#two继续添加click事件就只能:
    $( "#two").click(function(){
            console.log("为triggerHandler(event)绑定click事件触发")
    })
  4. $(selector).triggerHandler(event)方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。如果selector没有event事件,则没有处理程序被触发,那这个方法返回 undefined:
     $('#but1').bind('click',function(){
            var a = $( "#two" ).trigger( "click" );           //返回 button#two.but2 这个可链性的 jQuery 对象,即触发事件的对象
    //        var a = $( "#two" ).triggerHandler( "click" );  //返回“shit”,如没有下面的 $( "#two").click(function(){...}),则返回undefine
            console.log(a);
    });
    $( "#two").click(function(){
            console.log("click事件触发");
            return "shit";
    });

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页