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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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 split汉字
2009/06/05 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
决策树的python实现方法
2014/11/18 Python
python构建自定义回调函数详解
2017/06/20 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python 内存管理机制全面分析
2021/01/16 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
深入理解go slice结构
2021/09/15 Golang