欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-24 13:51:55
本文实例讲述了jquery事件模型默认行为执行顺序及trigger()与 triggerhandler()比较。分享给大家供大家参考，具体如下：前言：最近在工作中做需求时发现了一个诡异的事情，在使用j...

本文实例讲述了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.jb51.net/code/htmljsrun测试上述代码运行效果。

上一篇： PHP使用数组实现队列

下一篇： PHP获取url的函数代码

推荐阅读