jquery中的trigger和triggerHandler区别

简介: 我们在jQuery基础教程之如何注册以及触发自定义事件这篇文章中,有用到今天要讲的trigger方法。今天我们来简单看看jquery中的trigger何triggerHandler方法的区别:trigger( event, [data] )在每一个匹配的元素上触发某类事件。

我们在jQuery基础教程之如何注册以及触发自定义事件这篇文章中,有用到今天要讲的trigger方法。
今天我们来简单看看jquery中的trigger何triggerHandler方法的区别:
trigger( event, [data] )
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。
你也可以触发由bind()注册的自定义事件

 
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

 

triggerHandler( event, [data] )
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.
如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作:

为了让大家更好地理解这两者的区别,我在网上找来一个很棒的例子: 

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br><br>
<input type="text" value="To Be Focused">
<script>
$(function(){
    $("#old").click(function(){
        $("input").trigger("focus");
    });
    $("#new").click(function(){
        $("input").triggerHandler("focus");
    });
    $("input").focus(function(){
        $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });
});
</script>

 

 
相关文章
|
5月前
|
JavaScript 前端开发 API
vue和jQuery有什么区别
vue和jQuery有什么区别
35 0
|
2月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
28 0
|
5月前
|
JavaScript 前端开发 API
js和jquery的区别
js和jquery的区别
39 8
|
5月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
5月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
40 1
|
5月前
|
JavaScript 前端开发 API
JavaScript和jQuery的区别
JavaScript和jQuery的区别
|
5月前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
52 0
|
5月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
75 0
|
5月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发 API
Vue、jquery和angular之间区别
Vue、jquery和angular之间区别
70 2