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. Ubuntu Server如何配置SFTP（建立用户监狱）

    Ubuntu Server如何配置SFTP(建立用户监狱)   SSH File Transfer Protocol是一个比普通FTP更为安全的文件传输协议.(参考资料:http://en.wikip ...

  2. SVN专题（Visual SVN Server + TortoiseSVN + Visual SVN）

    参考资料: 1.Windows环境下搭建SVN服务器.原文地址:https://blog.csdn.net/lu1024188315/article/details/74082227 2.Git|SV ...

  3. CentOS7.6安装JDK(Openjdk)

    安装开始: 第一步: 使用yum源安装 OpenJDK,yum install -y java-1.8.0-openjdk 第二步: 查看安装版本,java -version 运行时发现错误汇总: 错 ...

  4. 爬虫的三种解析方式(正则解析, xpath解析, bs4解析)

    一 : 正则解析 : 常用正则回顾: 单字符: . : 除换行符以外的所有字符 [] : [aoe] [a-w] 匹配集合中任意一个字符 \d : 数字 [0-9] \D : 非数字 \w : 非数字 ...

  5. Django 获取时间 和Linux 本地 系统时间 不一致

    问题描述 Django 中获取的本地时间 ,和系统时间不一致 错误原因 Django在配置文件settings.py 中 默认配置 UTC世界标准时间,而北京时间是东八区,比UTC时间早8个小时. T ...

  6. 简单HttpClientUtils工具类

    package com.zy.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpStatus; import o ...

  7. [转]NDK编译库运行时报dlopen failed: cannot locate symbol "__exidx_end" 解决办法

    原文链接:http://blog.csdn.net/acm2008/article/details/41040015 当用NDK编译的库在运行加载时报如下错: dlopen("/data/d ...

  8. winfrom在图片上实现绘制

    在控件加载入图片的基础上进行绘制内容 添加文字 首先就是要确定输入的文字,还有文字的样式. 文字的样式用到了FontDialog控件,获取文字呢,就放个textbox就可以了.如果在输入文字的显示展示 ...

  9. linux系统软件版本升级

    在安装完软件之后,在同一层目录生成一个符号链接,并把当前软件的目录映射到这个链接上,后面的操作都只通过这个链接去做,以后升级版本的时候,把最新的软件目录映射到这个链接上就可以了. 如我刚装的apach ...

  10. solr自动提示 - jquery ui autocomplete

    需求: 搜索框中 输入部分关键词之后,有下拉联想提示.选中提示,使用鼠标或者使用enter键,则触发搜索功能.没有选择搜索提示,使用部分输入关键词作为搜索,直接使用enter键也能触发搜索功能.整个过 ...