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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现的上拉刷新功能组件示例
May 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
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python for i in range ()用法详解
2020/09/18 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
家长给老师的道歉信
2014/01/13 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
治庸问责心得体会
2014/09/12 职场文书
客户经理岗位职责
2015/01/31 职场文书
加入学生会自荐书
2015/03/05 职场文书
源码安装apache脚本部署过程详解
2022/09/23 Servers