html标签是有子和父的，这个时候就出现了事件触发顺序的问题，比如：

<!DOCTYPE html>

<html>

<head>

<style>

.first{

border:solid #FF0000

}

.second{

border:solid #00FF00

}

.third{

border:solid #0000FF

}

</style>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $(".first").click(function(){

    alert(0);

  });

  $(".second").click(function(){

    alert(1);

  });

  $(".third").click(function(){

    alert(2);

  });

});

</script>

</head>

<body>

<div class="first">

testFirst

<div class="second">

testSecond

<div class="third">

testThird

</div>

</div>

</div>

</body>

</html>

默认情况下，点third，三个事件都会触发，触发顺序为3,2,1.这种方式叫做冒泡触发。

一、使用javascript设置触发方式

可以使用javascript:DOM.addEventListener()方法添加时设置

element.addEventListener(event, function, useCapture);第三个参数为boolean，false的时候冒泡触发(默认值，从最下级的事件开始触发)，true的时候为捕获触发（从最上级元素的时间开始触发）。

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

二、使用jQuery设置事件触发方式

1、调用$(selector).on(event,childSelector,data,function,map)绑定时间，可以设置childSelector，意思是只为子元素中的一部分绑定该事件，可以筛选出一部分来绑定，也可以达到效果。

2、$("#hr_three").click(function(event){ 
　　　　return false; 
　　});

　　传入参数event，return false，为阻止后续包括默认点击事件和冒泡事件的所有事件，但不阻止绑定在该元素上的其他事件。

　　这里注意一下，如果是直接onclick方法中return false，则不能阻止事件冒泡，只能阻止默认事件。

3、event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（如执行了超链接的跳转），也不阻止绑定在该元素上的其他事件。

4、event.preventDefault();

事件处理过程中，不阻击事件冒泡，不阻止绑定在该元素上的其他事件，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

5、event.stopImmediatePropagation()

阻止其他事件处理程序被调用，阻止该元素的次优先级程序及所有冒泡事件，但不阻止默认行为。

6、上面

事件目标：纯javascript属性event.target

    事件粗粒程序的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性DOM API中规定的，但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素（即被实际单击的元素）。而且，我们知道this应用的是处理事件的DOM元素，所以可以编写下列代码：

    $(document).ready(function(){

    $(‘#switcher’).click(function(event){

    if(event.target == this){

        $(‘#switcher .button’).toggleClass(‘hidden‘);

}

});

});

此时的代码确保了被单击的元素是<div id=”switcher”>，而不是其它后代元素。

XML DOM target 事件属性

定义和用法

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

语法

event.target

模仿事件操作

返回值:jQuery            trigger(type, [data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行（除了a标签的跳转事件）。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。

参数

typeString,Event,Object

一个事件对象或者要触发的事件类型

data (可选)Array

(可选)传递给事件处理函数的附加参数

示例

描述:

提交第一个表单，但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

描述:

给一个事件传递参数(click()同样触发默认事件)

jQuery 代码:

$("p").click(function (event, a, b) {

  // 一个普通的点击事件时，a和b是undefined类型

  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"

}).trigger("click", ["foo", "bar"]);

描述:

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent",function (event, message1, message2) {

alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent",["Hello","World!"]);

三、unbind，off（推荐）用于解除绑定事件，但是解除不了标签中的onclick属性事件和默认点击事件，要取消，则要返回false。

且unbind与off是可以使用事件触发传入的event对象来取消时间绑定，用于触发多少次就不再触发（若想触发一次不再触发，则可使用one()来绑定事件）

$(document).ready(function(){

  var x=0;

  $("p").click(function(event){

    $("p").animate({fontSize:"+=5px"});

    x++;

    if (x>=2)

      {

      $(this).unbind(event);

      }

  });

});

Javascript事件触发顺序的更多相关文章

  1. 针对focus和blur的Dom事件触发顺序

    Dom事件触发顺序,拿文本框举例: 它会先触发focus事件,之后才会触发在有交点之后才能触发的一些如 click  change 等事件(但如果有mousedown则先执行). 而相对于blur而言 ...

  2. .Net Install类的Install、Commit等事件触发顺序

    .Net Install类的Install.Commit等事件触发顺序 空间   首先是Install其中调用base.Install过程中导致OnBeforeInstallOnAfterInstal ...

  3. JS基础知识：Javascript事件触发列表

    Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...

  4. sencha touch list(列表) item(单行)单击事件触发顺序

    测试代码如下 Ext.define('app.view.new.List', { alternateClassName: 'newList', extend: 'app.view.util.MyLis ...

  5. 2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序

    原文:2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序 title author date CreateTime categories WPF 多个 StylusPlugI ...

  6. 2019-10-21-WPF-多个-StylusPlugIn-的事件触发顺序

    title author date CreateTime categories WPF 多个 StylusPlugIn 的事件触发顺序 lindexi 2019-10-21 08:33:15 +080 ...

  7. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  8. Zendframework 模块加载事件触发顺序。

    模块加载时事件触发的时间顺序: 0.loadModules(ModuleEvent::EVENT_LOAD_MODULES) 1.  loadModule.resolve(ModuleEvent::E ...

  9. javascript 事件触发

    http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/ htt ...

随机推荐

  1. 【汇总】C#数据类型及转换

    13.C# 16进制与字符串.字节数组之间的转换 https://www.cnblogs.com/seventeen/archive/2009/10/29/1591936.html C# 对象.文件与 ...

  2. jQuery之事件和动画

    1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...

  3. TBluetoothLE.OnDisconnectDevice

    自己作为广播方,连接我的设备断开收到的事件. TBluetoothLE.OnDisconnectDevice TBluetoothLEDevice BluetoothLE1->Discovere ...

  4. FilreDAC DLL共享数据连接

    D:\Users\Public\Documents\Embarcadero\Studio\16.0\Samples\Object Pascal\Database\FireDAC\Samples\Com ...

  5. 在EXCEL中使用SQL语句查询

    SQL语句在数据库使用中十分重要. 在EXCEL中可以不打开工作簿,就获取数据,对多工作簿操作很用,也很快. 对大量数据处理,比循环快很多,但是比词典方法还有点距离(可惜我还没有学会词典). 对数据库 ...

  6. 手动为 Team Foundation Server 安装 SQL Server

    本主题中的步骤适用于安装 SQL Server 2012 企业版,你也可以使用安装标准版的相同步骤. 适用于 SQL 2014 的步骤与以上步骤也非常相似. 我们将在 TFS 所在的同一服务器上安装 ...

  7. iss 默认上传大小为30 M

    在 Windows7(iis7.5).Win2008(iis 7.0)和Win2003(iis 6.0) 中,默认设置是特别严格和安全的,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击.指 ...

  8. 通过Scanner从控制台获取数据

    ----------siwuxie095 Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据 Scanner类位于 java.util.Scanner 包中 Scanner ...

  9. IDEA05 mybatis插件之MyBatisCodeHelper-Pro

    前提准备: >IDEA专业版本 1 安装MyBatisCodeHelper-Pro IDEA提供了插件安装功能,可以根据开发需要安装适合的插件 >help -> find actio ...

  10. Android 重写EditText回车事件

    之前遇到的问题没来得及记录下来,趁今晚有空就重新回忆并写下了. 我们在用到EditText这个空间时经常需要重写软键盘中的回车事件以配合我们接下来的响应,比如点击回车变成搜索.发送.完成等. Edit ...