jQuery事件模型默认行为触发顺序是什么？trigger()和tri()如何改写？

2026-04-03 09:571阅读0评论SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计1568个文字，预计阅读时间需要7分钟。

jQuery事件模型默认行为触发顺序是什么？trigger()和tri()如何改写？

原文示例：本文实例讲述了jQuery事件模型默认行为为执行顺序以及trigger()与triggerHandler()的比较。分享给广大家长供大家参考，具体如下：

jQuery事件模型默认行为触发顺序是什么？trigger()和tri()如何改写？

前言：最近在工作中发现了一个异常的情况，在使用jQuery时遇到了一个问题。

问题描述：在使用jQuery的trigger()方法触发事件时，发现事件的执行顺序与预期的不符。

解决方法：经过分析，发现这是因为jQuery的事件模型默认行为是按照执行顺序来执行事件的。而trigger()方法只是触发事件，并不改变事件的执行顺序。

比较：trigger()与triggerHandler()的区别在于，trigger()会按照事件冒泡的顺序执行所有的事件监听器，而triggerHandler()则只执行指定的事件监听器。

总结：在使用jQuery处理事件时，需要注意事件模型的默认行为，以及trigger()与triggerHandler()的区别，以确保代码的正确性和效率。

改写后：本文实例说明jQuery事件模型默认执行顺序及trigger()与triggerHandler()的用法对比。供大家参考，具体如下：

前言：近期工作中遇到一问题，jQuery使用中触发事件时出现异常。

问题简述：发现jQuery的trigger()方法触发事件时，执行顺序与预期不一致。

解决思路：分析后发现，jQuery事件模型默认按执行顺序执行，trigger()仅触发事件，不改变执行顺序。

用法对比：trigger()与triggerHandler()的主要区别在于，trigger()会触发所有监听器，而triggerHandler()只触发指定监听器。

总结：jQuery事件处理中，需注意默认执行顺序及方法区别，以确保代码正确性。

本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较。分享给大家供大家参考，具体如下：

前言：

最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先执行默认行为，再执行绑定的事件行为，有时候可能是相反的顺序。于是上网查找了下资料，还真有个外国哥们和我遇到同一个问题！整理下笔记先~ ~

默认行为执行顺序

一般来说，浏览器执行事件的顺序是：先执行默认行为再执行绑定的行为。
可是在 jquery 中有些时候会出现相反的顺序，先执行绑定的行为，再执行默认行为。
那这里说的“有些时候”到底是什么时候呢？

看下面的代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Trigger and Default Behavior Demo</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> // When the DOM is ready, initialize. $(function(){ $( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Trigger click on the checkbox. $( "input" ).click(); } ); }); </script> </head> <body> <h1> jQuery Trigger and Default Behavior Demo </h1> <form> <input type="checkbox" /> <button>click checkbox</button> </form> </body> </html>

说明：页面中有2个元素，一个是 input 元素，一个是button 元素，并分别绑定了click 事件。当直接点击 input 元素时，alert结果为 true，input 的默认行为是在绑定的 click 事件之前发生的；当点击 button 元素时，alert结果却变成了 false，input 的默认行为是在绑定的 click 事件之后发生的；

细细体会其中的差别，发现当调用JQuery 的 $(selector) .click( )或者$(selector).trigger('click') 来触发 selector 元素的click事件时， 默认行为会在绑定的 click 事件之后发生。

那么如果我们希望，任何情况下默认行为都在绑定的 click 事件之前发生怎么做呢？

最简单的方法就是在触发 input 元素的 click 事件之前，手动设置 checkbox 的 checked 属性，然后通过 triggerHandler()来触发 click 事件（不触发浏览器的默认行为）。代码如下所示：

$( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Toggle checkbox checked status. $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked; // Trigger ONLY click event hanlders on the checkbox. $( "input" ).triggerHandler( "click" ); } );

jQuery中 trigger( ) 与 triggerHandler( ) 区别

共同点：

  1. 都能触发通过 jquery 绑定的事件处理函数，如 .on()/.bind()/.click(function(){ })这些方式；

  2. 都能触发原生元素对象上的on{eventType}绑定的事件处理函数；

不同点：

  1. triggerHandler(‘event') 不会触发原生元素对象上的.event()方法（这种事件叫native event），而 trigger(‘event')则会；
    浏览器的默认行为其实是执行了原生元素对象上的.event()方法！！！

  2. .triggerHandler()只会触发第一个匹配的元素上的事件，而 trigger()会触发所有匹配元素的事件；

  3. .triggerHandler()触发的事件不会冒泡，而 trigger()会冒泡；

  4. .triggerHandler()返回值可以是任意值，如果没有明确 return 值，则为 undefined，而.trigger()永远返回 jQuery object。所以使用.triggerHandler()时链式调用得自己实现。

使用 trigger( )与triggerHandler( )注意事项

有一次我用 trigger('click')来触发点击事件时，鼠标并没有改变位置，也就是说鼠标焦点没有改变。测试了下发现，trigger( )与triggerHandler( )触发事件时并不会改变鼠标焦点，所以trigger('click')方式触发点击事件这种方式，还是和用户真正执行点击动作是不同的。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

标签：jquery事件模型默认行为

相关推荐

40143如何选择合适的PHP和CGI自动化测试技术及工具？40145如何使用PHP和PHPMAILER制作一个高效的邮件联系表单？40152PHP ZipArchive如何处理压缩包中包含中文字符的文件名？40153PHP函数strlen()能获取字符串长度，那如何用它来计算超长单词的字符数呢？40154如何有效防止PHP和CGI程序中的SQL注入攻击？40155如何用PHP和phpSpider实现网站长尾关键词的无缝链接跟踪？40159PHP的array_product()函数能计算数组所有元素的乘积吗？40161如何利用PHP和PHPMAILER实现密码找回功能的邮件发送？40182如何用PHP和phpSpider高效抓取社交媒体用户信息？40192如何利用PHP和Typecho对博客站点进行SEO优化以提升长尾关键词排名？40196如何使用PHP ZipArchive批量解压并删除压缩包中的所有文件？40199如何利用PHP和PHPMAILER在网站中创建高效的活动调查邮件发送系统？40211如何通过Typecho中的PHP编程艺术实现长尾关键词优化？40233如何利用PHP和PHPMAILER在网站中实现邮件发送的黑名单智能管理功能？40238如何通过PHP快手API实现高效的用户注册与登录流程？40243如何通过PHP ZipArchive修改压缩包内文件的属性？

本文共计1568个文字，预计阅读时间需要7分钟。

jQuery事件模型默认行为触发顺序是什么？trigger()和tri()如何改写？

原文示例：本文实例讲述了jQuery事件模型默认行为为执行顺序以及trigger()与triggerHandler()的比较。分享给广大家长供大家参考，具体如下：

jQuery事件模型默认行为触发顺序是什么？trigger()和tri()如何改写？

前言：最近在工作中发现了一个异常的情况，在使用jQuery时遇到了一个问题。

问题描述：在使用jQuery的trigger()方法触发事件时，发现事件的执行顺序与预期的不符。

解决方法：经过分析，发现这是因为jQuery的事件模型默认行为是按照执行顺序来执行事件的。而trigger()方法只是触发事件，并不改变事件的执行顺序。

比较：trigger()与triggerHandler()的区别在于，trigger()会按照事件冒泡的顺序执行所有的事件监听器，而triggerHandler()则只执行指定的事件监听器。

总结：在使用jQuery处理事件时，需要注意事件模型的默认行为，以及trigger()与triggerHandler()的区别，以确保代码的正确性和效率。

改写后：本文实例说明jQuery事件模型默认执行顺序及trigger()与triggerHandler()的用法对比。供大家参考，具体如下：

前言：近期工作中遇到一问题，jQuery使用中触发事件时出现异常。

问题简述：发现jQuery的trigger()方法触发事件时，执行顺序与预期不一致。

解决思路：分析后发现，jQuery事件模型默认按执行顺序执行，trigger()仅触发事件，不改变执行顺序。

用法对比：trigger()与triggerHandler()的主要区别在于，trigger()会触发所有监听器，而triggerHandler()只触发指定监听器。

总结：jQuery事件处理中，需注意默认执行顺序及方法区别，以确保代码正确性。

本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较。分享给大家供大家参考，具体如下：

前言：

最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先执行默认行为，再执行绑定的事件行为，有时候可能是相反的顺序。于是上网查找了下资料，还真有个外国哥们和我遇到同一个问题！整理下笔记先~ ~

默认行为执行顺序

一般来说，浏览器执行事件的顺序是：先执行默认行为再执行绑定的行为。
可是在 jquery 中有些时候会出现相反的顺序，先执行绑定的行为，再执行默认行为。
那这里说的“有些时候”到底是什么时候呢？

看下面的代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Trigger and Default Behavior Demo</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> // When the DOM is ready, initialize. $(function(){ $( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Trigger click on the checkbox. $( "input" ).click(); } ); }); </script> </head> <body> <h1> jQuery Trigger and Default Behavior Demo </h1> <form> <input type="checkbox" /> <button>click checkbox</button> </form> </body> </html>

说明：页面中有2个元素，一个是 input 元素，一个是button 元素，并分别绑定了click 事件。当直接点击 input 元素时，alert结果为 true，input 的默认行为是在绑定的 click 事件之前发生的；当点击 button 元素时，alert结果却变成了 false，input 的默认行为是在绑定的 click 事件之后发生的；

细细体会其中的差别，发现当调用JQuery 的 $(selector) .click( )或者$(selector).trigger('click') 来触发 selector 元素的click事件时， 默认行为会在绑定的 click 事件之后发生。

那么如果我们希望，任何情况下默认行为都在绑定的 click 事件之前发生怎么做呢？

最简单的方法就是在触发 input 元素的 click 事件之前，手动设置 checkbox 的 checked 属性，然后通过 triggerHandler()来触发 click 事件（不触发浏览器的默认行为）。代码如下所示：

$( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Toggle checkbox checked status. $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked; // Trigger ONLY click event hanlders on the checkbox. $( "input" ).triggerHandler( "click" ); } );

jQuery中 trigger( ) 与 triggerHandler( ) 区别

共同点：

  1. 都能触发通过 jquery 绑定的事件处理函数，如 .on()/.bind()/.click(function(){ })这些方式；

  2. 都能触发原生元素对象上的on{eventType}绑定的事件处理函数；

不同点：

  1. triggerHandler(‘event') 不会触发原生元素对象上的.event()方法（这种事件叫native event），而 trigger(‘event')则会；
    浏览器的默认行为其实是执行了原生元素对象上的.event()方法！！！

  2. .triggerHandler()只会触发第一个匹配的元素上的事件，而 trigger()会触发所有匹配元素的事件；

  3. .triggerHandler()触发的事件不会冒泡，而 trigger()会冒泡；

  4. .triggerHandler()返回值可以是任意值，如果没有明确 return 值，则为 undefined，而.trigger()永远返回 jQuery object。所以使用.triggerHandler()时链式调用得自己实现。

使用 trigger( )与triggerHandler( )注意事项

有一次我用 trigger('click')来触发点击事件时，鼠标并没有改变位置，也就是说鼠标焦点没有改变。测试了下发现，trigger( )与triggerHandler( )触发事件时并不会改变鼠标焦点，所以trigger('click')方式触发点击事件这种方式，还是和用户真正执行点击动作是不同的。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。