jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析


Posted in jQuery onApril 30, 2020

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

前言:

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

默认行为执行顺序

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

看下面的代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解jQuery-each()方法
Mar 13 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
jquery检测上传文件大小示例
Apr 26 #jQuery
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
You might like
php 破解防盗链图片函数
2008/12/09 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python实现截屏的函数
2015/07/25 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
物流仓管员工作职责
2014/01/06 职场文书
民生工程实施方案
2014/03/22 职场文书
考核工作实施方案
2014/03/30 职场文书
葬礼司仪主持词
2014/03/31 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
会议通知
2015/04/15 职场文书
2019各种承诺书范文
2019/06/24 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android