Javascript事件触发顺序
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事件触发顺序的更多相关文章
- 针对focus和blur的Dom事件触发顺序
Dom事件触发顺序,拿文本框举例: 它会先触发focus事件,之后才会触发在有交点之后才能触发的一些如 click change 等事件(但如果有mousedown则先执行). 而相对于blur而言 ...
- .Net Install类的Install、Commit等事件触发顺序
.Net Install类的Install.Commit等事件触发顺序 空间 首先是Install其中调用base.Install过程中导致OnBeforeInstallOnAfterInstal ...
- JS基础知识：Javascript事件触发列表
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言. JavaScript使我们有能 ...
- sencha touch list(列表) item(单行)单击事件触发顺序
测试代码如下 Ext.define('app.view.new.List', { alternateClassName: 'newList', extend: 'app.view.util.MyLis ...
- 2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序
原文:2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序 title author date CreateTime categories WPF 多个 StylusPlugI ...
- 2019-10-21-WPF-多个-StylusPlugIn-的事件触发顺序
title author date CreateTime categories WPF 多个 StylusPlugIn 的事件触发顺序 lindexi 2019-10-21 08:33:15 +080 ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
- Zendframework 模块加载事件触发顺序。
模块加载时事件触发的时间顺序: 0.loadModules(ModuleEvent::EVENT_LOAD_MODULES) 1. loadModule.resolve(ModuleEvent::E ...
- 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 ...
随机推荐
- [OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget(第二部分)
本文译自:http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-opengl-widget-per-visualizzare-imm ...
- cocos2dx中快速完成一段可播放动画
版本:cocos2dx 2.2.6 IDE: VS2012 语言:C++98 CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteF ...
- 指向“**js/shop.js”的 <script> 加载失败
指向“”的 <script> 加载失败 找了半天没找到原因 原来是meta里面的 csp Content-Security-Policy <meta http-equiv=" ...
- ubuntu安装Percona Server
Percona Server是mysql数据库的一个衍生版本,在性能,稳定性和可管理性上都有很大的提升,目前淘宝的mysql数据库就是基于Percona Server,请原谅我这么喜欢研究淘宝的技术. ...
- 使用JAVA爬取去哪儿网入住信息
昨天帮一个商科同学爬取去哪儿网站的所有广州如家快捷酒店的所有入住信息. 就是上面的商务出行 xxx年入住这些东西 然而去哪儿的前端很强,在获取所有如家快捷酒店的时候就遇到了问题. 他显示的酒店列表是j ...
- GeoServer之sqlserver插件使用
GeoServer之sqlserver插件使用 安装好sqlserver插件后,点击出现的第一个选项,开始创建wms服务. 输入参数: 工作区:为geoserver中创建的工作区 数据源名称:自定义 ...
- 转载----开发运维资产管理系统cmdb一些观点扯淡
在新公司负责全网的自动化运维平台及给各个业务线提供接口数据.这工作和以前做的很类似,也算是比较顺手的工作,这段时候遇见一些问题,导致开发的前进速度的放慢了,具体有哪些的不完善,我这里就先不摆出了,但是 ...
- ror笔记2
在rails app的 config 文件夹中新建unicorn.rb内容如下 worker_processes 2 working_directory "/home/mage/boleht ...
- Linux 如何杀死僵尸进程
问题描述: shell > top top - :: up days, :, user, load average: 0.23, 0.81, 1.07 Tasks: total, running ...
- Java设计模式学习01——单例模式(转)
原地址:http://blog.csdn.net/xu__cg/article/details/70182988 Java单例模式是一种常见且较为简单的设计模式.单例模式,顾名思义一个类仅能有一个实例 ...