jq中trigger和triggerHandler用法

最新推荐文章于 2020-06-07 11:45:32 发布

YinghaoGuo

最新推荐文章于 2020-06-07 11:45:32 发布

阅读量4.5k

点赞数 3

分类专栏： javascript篇文章标签： jquery trigger triggerHandler

本文链接：https://blog.csdn.net/qq_22855325/article/details/72955628

版权

javascript篇专栏收录该内容

27 篇文章 1 订阅

订阅专栏

我们经常要在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，用法相同，差别如下：

$(selector).trigger(event)会触发所有selector的event事件，而$(selector).triggerHandler(event)只会触发selector第一个元素的event事件(如果selector为通过id获取的元素则无所谓了)。
$(selector).triggerHandler(event)不会触发事件的默认行为，比如上面说的$('form').trigger("submit")，triggerHandler不会触发表单提交。

由 $(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事件触发")
})

$(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";
});

YinghaoGuo

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jq中trigger和triggerHandler用法

我们经常要在js中手动触发一些事件，比如控制点击某个按钮，通过按钮的click事件执行一些操作等等。一般情况下我们使用js触发点击事件写法如下：$('#but').bind('click',function(){ $('#a_but').click(); //当点击#but时，触发#a_but的点击事件});使用trigger触发点击事件的写法如下：$('#but'
复制链接

扫一扫