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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • Jquery ajax执行顺序 返回自定义错误信息(实例讲解)

    1.多个Ajax 在一个function中的执行顺序 由于Jquery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false就可以了. 复制代码 代码如下: function TestAjax(){            var UserName = $("#txtUserName").val();            $.ajax(            {                url: &quo

  • jquery $.ajax各个事件执行顺序

    1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.error 7.ajaxError (全局事件) 8.complete 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件)

  • 如何确保JavaScript的执行顺序 之jQuery.html深度分析

    如何确保JavaScript的执行顺序 之jQuery.html深度分析

    我们先来简单回顾下HTML源代码(test2.htm): 复制代码 代码如下: <html> <head> <title></title> <script src="js/jquery-1.4.4.js" type="text/javascript"></script> <script> $(function(){ $('#container').html('<script s

  • jQuery中(function(){})()执行顺序的理解

    总体来说,顺序是这样的:先计算第一个小括号,发现里面的表达式是一个函数,返会该匿名函数的引用(指针),最后一个括号则是建立匿名函数的实参和并执行. 示例: 计算两个数之和. JavaScript: 复制代码 代码如下: (function sum(a,b){ //此处也可去掉sum,以匿名函数的形式出现 alert(a+b); })(7,8); C: 复制代码 代码如下: int sum(int a,int b){return a+b;} void main(){ int (*pt)(int,i

  • jquery的trigger和triggerHandler的区别示例介绍

    trigger 和triggerHandler都是模拟事件发生的 用具体的案例来描述一下区别 复制代码 代码如下: <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></scrip

  • jquery中ajax函数执行顺序问题之如何设置同步

    JavaScript code 复制代码 代码如下: function existProduct(obj){ var productname = escape(obj.val()); $.getJSON("../product/searchProductByName.action",datat,function(data){ var falg; falg = data[0]['existproduct']; //falg返回为no 或yes, return falg; }); } fu

  • 简述jQuery ajax的执行顺序

    jQuery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false即可. 代码如下: function TestAjax() { var UserName = $("#txtUserName").val(); $.ajax({ url:"AjaxCheckUserName.htm", async:false, success:function(data){ alert(data); } })

  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

  • jQuery中triggerHandler()方法用法实例

    本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型. 从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).t

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

    本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较.分享给大家供大家参考,具体如下: 前言: 最近在工作中做需求时发现了一个诡异的事情,在使用jQuery触发事件时,并不总是先执行默认行为,再执行绑定的事件行为,有时候可能是相反的顺序.于是上网查找了下资料,还真有个外国哥们和我遇到同一个问题!整理下笔记先~ ~ 默认行为执行顺序 一般来说,浏览器执行事件的顺序是:先执行默认行为再执行绑定的行为. 可是在 jquery 中有些时候会出现相

  • jQuery学习5 jQuery事件模型

    jQuery事件模型的功能有: 提供建立事件处理程序的统一方法: 允许在每个元素上为每个时间类型建立多个处理程序: 采用标准的事件类型名称,例如click或mouseover: 使用Event实例可用作处理程序的参数: 对Event实例的最常用的属性进行规范化: 为取消事件和阻塞默认操作提供统一方法. jQuery绑定事件处理程序: bind()命令 $('img').bind('click',funciton(event){alert('Hi there');}); 该语句为页面上的图片绑定已

  • JavaScript执行顺序详细介绍

    JavaScript执行顺序详细介绍

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析.1.1  按HTML文档流顺序执行JavaScript代码首先,读者应该清楚,H

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • Java拦截器Interceptor和过滤器Filte的执行顺序和区别

    Java拦截器Interceptor和过滤器Filte的执行顺序和区别

    目录 1.实现原理不同 2.使用范围不同 3.触发时机不同 4.拦截的请求范围不同 5.注入Bean情况不同 6.控制执行顺序不同 1.实现原理不同 过滤器和拦截器 底层实现方式大不相同,过滤器 是基于函数回调的,拦截器 则是基于Java的反射机制(动态代理)实现的. 1.拦截器是基于java的反射机制的,而过滤器是基于函数回调 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器 3.拦截器只能对action请求起作用,而过滤器则可以对几乎所有的请求起作用 4.拦截器可以访问

  • c++ For循环执行顺序流程图解

    c++ For循环执行顺序流程图解

    for 循环允许您编写一个执行特定次数的循环的重复控制结构. 语法 C++ 中 for 循环的语法: for ( init; condition; increment ) { statement(s); } 下面是 for 循环的控制流: init 会首先被执行,且只会执行一次.这一步允许您声明并初始化任何循环控制变量.您也可以不在这里写任何语句,只要有一个分号出现即可. 接下来,会判断 condition.如果为真,则执行循环主体.如果为假,则不执行循环主体,且控制流会跳转到紧接着 for 循

  • jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地

  • javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,

  • JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法.分享给大家供大家参考,具体如下: 事件的执行顺序绝对是让人头疼的问题.当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段.有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发.如果你想细致了解JavaScript中的事件发生,请慢慢阅读. 1. 原生事件的发生顺序 一般来讲,当为一个a标签添加click事件以后,点击这个标签

随机推荐