javascript冒泡事件详解
冒泡事件:
定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级,爷级等等同级的亲戚集是不会触发的
捕获事件:
*定义:** 同冒泡事件含义相似,只是将冒泡事件的触发顺序倒过来即可
DOM事件流
元素的触发流程分为三个阶段
捕获阶段:先从祖先级一直找到触发的源元素(所有元素都触发了相同事件)
目标阶段:找到原元素,然后触发源元素的事件
冒泡阶段:然后重新流回祖先元素,又触发了一遍相同事件
思考: 按照上面的事件流,岂不是一个元素会触发两次事件?那这不是很奇怪吗:其实在我们一般开发过程中都是用Jquery 的 on 方法来绑定的(推荐使用),绑定后,只会触发冒泡事件。那么什么时候会涉及到这个捕获阶段呢,在原生的javascript中,就会有此方法的使用,且看下面详解
详解 addEventListener/removeEventListener
作用: 原生的事件绑定方法
// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获(true),默认false,代表事件冒泡类型
addEventListener(type, listener, useCapture);特点:
一个元素可以同时绑定两种类型(捕获/冒泡)
一个同种类型的元素重复绑定同一个事件函数,只绑定一次
一个元素可以重复绑定多个不同的函数,且是叠加而非覆盖
触发流程:
首先源目标触发了事件
开始捕获阶段,将其直系亲属(类型为捕获)的事件触发
到达源元素,触发事件方法,如果重复绑定多个,则按绑定顺序触发(源元素的类型其实没有影响)
然后开始冒泡排序,将其直系亲属(类型为冒泡)的事件触发
<script> window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC"); // 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener('click',function(){alert("target2");},true);
outC.addEventListener('click',function(){alert("target1");},true); // 事件冒泡
outA.addEventListener('click',function(){alert("bubble1");},false);
outB.addEventListener('click',function(){alert("bubble2");},false); // 事件捕获
outA.addEventListener('click',function(){alert("capture1");},true);
outB.addEventListener('click',function(){alert("capture2");},true);
}; </script> <body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
点击outC的时候,打印顺序是:capture1-->capture2-->target2-->target1-->bubble2-->bubble1结论:捕获阶段的处理函数最先执行,其次是目标阶段的处理函数,最后是冒泡阶段的处理函数。目标阶段的处理函数,先注册的先执行,后注册的后执行
如何解决冒泡/捕获事件的影响
目的: 我们很清楚,解决冒泡和捕获事件的影响,只需要在源元素触发完事件之后停止事件的传播即可
方式:
event.stopPropagation(); 只阻止了冒泡事件, 默认行为没有阻止(超链接a嵌套按钮,依然会跳转)
event.preventDefault(); 只阻止了默认事件,冒泡事件没有阻止(超链接a嵌套按钮,不跳转,但会触发点击事件)
return false; 冒泡事件和默认事件都阻止
<script> window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC"); // 目标
outC.addEventListener('click',function(event){
alert("target");
event.stopPropagation();
},false); // 事件冒泡
outA.addEventListener('click',function(){alert("bubble");},false); // 事件捕获
outA.addEventListener('click',function(){alert("capture");},true); }; </script> <body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
capture-->target,不会打印出bubble。因为当事件传播到outC上的处理函数时,通过stopPropagation阻止了事件的继续传播,所以不会继续传播到冒泡阶段,当然如果此方法放到了捕获中,那么就只会打印出capture了注意点:
今天用 on 绑定的时候,div 嵌套按钮,按钮里的事件触发带有ajax的请求,结果点击确实进入了按钮事件方法中,但是还没有进入回调函数,就跳转到div的点击事件方法中了,然后再跳回回调方法中,采用了以下方法解决
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>webApi测试</title>
<script src="~/js/jquery.min.js"></script>
</head>
<body>
<div id="first">
</div>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function () {
$("#outC").on ("click",function () { alert("C")});
$("#outB").on ("click",function () { alert("B") });
$("#outA").on("click", function () { alert("A") });
$("#outD").on("click", function () { alert("D") });
$("#first").on("click", function () { debugger; alert("最外层div") });
$("#routeTest").on("click", ajaxFunction);
function ajaxFunction() {
debugger;
//event.cancelBubble = true;//取消事件的冒泡,效果同下
//return false//此方法会导致此方法直接结束,因此不能直接使用
event.stopPropagation();
$.ajax({
url: "/Course/GetCourseByRoute?temp"+Date.parse(new Date()),
type: 'get',
success: function (res) {
debugger;
alert(res);
}
});
}
});
</script>
参考资料
javascript冒泡事件详解的更多相关文章
- Js冒泡事件详解及阻止
Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html> & ...
- javascript之事件详解2
1.事件对象: 在触发DOM事件的时候都会产生一个对象. 2.事件对象event: (1).type:获取事件类型 (2).target:获取事件目标 (3).stopPropagation():阻止 ...
- javaScript -- touch事件详解(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- JavaScript——event事件详解
1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- JAVASCRIPT事件详解-------原生事件基础....
javaScirpt事件详解-原生事件基础(一) 事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
随机推荐
- 采购订单审批与撤销审批BAPI
*"---------------------------------------------------------------------- *"*"本地接口: *& ...
- 【Leetcode_easy】754. Reach a Number
problem 754. Reach a Number solution1: class Solution { public: int reachNumber(int target) { target ...
- Spring Aop(十六)——编程式的自定义Advisor
转发:https://www.iteye.com/blog/elim-2399437 https://www.iteye.com/blogs/subjects/springaop 编程式的自定义Adv ...
- 推特Twitter视频下载的2种方法
Twitter上面的小视频越来越受欢迎了,其实,从社会发展的角度看,短视频的流行是一种必然的趋势.首先,智能手机和高速网络的普及,让人们的碎片化时间得以利用.坐地铁.吃饭的时间,点开一个视频段子.学一 ...
- bzoj3624(Apio2008):免费道路
题目↓ Sample Input 5 7 2 1 3 0 4 5 1 3 2 0 5 3 1 4 3 0 1 2 1 4 2 1 Sample Output 3 2 0 4 3 0 5 3 1 1 2 ...
- extentreports报告插件与testng集成
前段时间在群里有人说了下用这个插件来生成测试报告,发现生成的报告非常不错.就下来学习了一下,并集成到了testng上,下面来分享一下: ExtentReports (by Anshoo Arora) ...
- 设计模式的好书 -- ongoing
1 设计模式--可复用面向对象软件的基础 Erich Gamma. Richard Helm -- 已经下载了/baiduNetDisk Design Patterns --- Element ...
- B9 Concurrent 重入锁(ReentrantLock)
[概述] java.util.concurrent.locks.ReentrantLock 实现 java.util.concurrent.locks.Lock 接口,加锁(lock)和 解锁(unl ...
- POJ 2299-Ultra-QuickSort-线段树的两种建树方式
此题有两种建树方式! Description In this problem, you have to analyze a particular sorting algorithm. The algo ...
- 只学python行吗
常言道:"流水的语言,铁打的Python",目前它可以说是已经"睥睨天下,傲视群雄"了.它天生丽质,易于读写,非常实用,从而赢得了 广泛的群众基础,被誉为&qu ...