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 replace方法去空格
May 08 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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&amp;&amp;mysql)一
2006/10/09 PHP
PHP新手上路(七)
2006/10/09 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue写h5页面的方法总结
2019/02/12 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python要安装在哪个盘
2020/06/15 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
运动会解说词50字
2014/01/18 职场文书
《称象》教学反思
2014/04/25 职场文书
村委会换届选举方案
2014/05/03 职场文书
2014年中秋寄语
2014/08/11 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
老公出轨后的保证书
2015/05/08 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL