对于js中事件冒泡的理解分析
一. 事件
- 事件的三个阶段：事件捕获 -> 事件目标 -> 事件冒泡
- 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
- 目标阶段：到达目标事件位置（事发地），触发事件；
- 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象
事件捕获：事件发生时首先发生在document上，然后依次传递给body，最后到达目的节点（即事件目标)，事件流模型：div →body→ html→ document 。
事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反。
onclick 事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题
addEventListener(event.type, handle, boolean);IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖。事件类型没有on，第三个参数false，表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。如果绑定同一个事件同一个方法，只会执行一次，所以如果handle是同一个方法，只执行一次。attachEvent(event.type, handle );IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段，可以多次进行绑定，所以如果handle是同一个方法，绑定几次执行几次，同时事件类型要加on。- 默认事件行为：href=""链接，submit表单提交等
- 阻止默认事件：
return false;阻止独享属性（通过on这种方式）绑定的事件的默认事件，阻止浏览器对事件的默认处理，只在当前函数有效，不会影响其他外部函数的执行event.preventDefault( );- 阻止通过
addEventListener( )添加的事件的默认事件event.returnValue = false;阻止通过attachEvent( )添加的事件的默认事件
事件的绑定与事件的解绑
事件的绑定：
代码如下：
function addEvent(element,eType,handle,bol){
// 支持addEventListener
if(element.addEventListener){
element.addEventListener(eType,handle,bol);
// 支持attachEvent
}else if(element.attachEvent){
element.attachEvent("on"+eType,handle);
// 兼容的onclick的绑定
}else{
element["on"+eType] = handle;
}
}
事件的解绑：
代码如下：
function removeEvent(element,eType,handle,bol){
// 支持addEventListener
if(element.addEventListener){
element.addEventListener(eType,handle,bol);
// 支持attachEvent
}else if(element.attachEvent){
element.detachEvent("on"+eType,handle);
// 兼容的onclick的绑定
}else{
element["on"+eType] = null;
}
}
封装函数：通过事件冒泡的方式，兼容事件捕获只需要添加个bool参数
代码如下：
var EventUtil = {
addEvent: function(element,type,handle){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.addEvent){
element.addEvent("on"+type,handle);
}else{
element["on"+type] = handle;
}
},
removeEvent:function(element,type,handle){
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}else if(element.removeEvent){
element.removeEvent("on"+type,handle);
}else{
element["on"+type] = null;
}
}
}
- 常见的事件绑定
1）bind()
- 只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件
- bind()不能使用的情况：为DOM中的很多元素绑定相同的事件，为DOM中的尚不存在的元素绑定事件
2）live()
- 方法会把click事件绑定到
$(document)对象，而且只需要给$(document)绑定一次，然后就能够处理后续动态加载的节点的事件 - 在接收到任何事件时，
$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序
3）delegate()
- 直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”
$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确 - 支持在连缀的DOM遍历方法后面调用，即支持
$("table").find("#info").delegate...，支持精确控制
- 事件冒泡、事件捕获阻止
event.stopPropagation( );阻止事件的进一步传播，包括（冒泡，捕获），无参数event.cancelBubble = true;true 为阻止冒泡
- W3C事件模型中发生的任何事件，先从其祖先元素window开始一路向下捕获， 直到达到目标元素，其后再次从目标元素开始冒泡。可以决定事件处理器是注册在捕获或者是冒泡阶段。
注意：如果addEventListener的最后一个参数是true, 那么处理函数将在捕获阶段被触发; 否则(false), 会在冒泡阶段被触发，默认false。
二、事件冒泡
事件冒泡：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。从事件源，自下而上的过程中，阻止向上冒泡，即阻止触发上级元素的事件触发，上级元素做事件触发时，在此事件源上无效。在事件传播的过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。
事件冒泡的实例
代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body> <div id="div1">div1
<div id="div2">div2</div>
</div> </body>
<script> var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2"); div1.onclick = function(){
console.log("我是div1");
}; div2.onclick = function(){
console.log("我是div2");
}; </script>
</html>
说明：两个父子关系的div1和div2，分别给div1和div2绑定了点击事件。当点击div1的时候，控制台打印输出 我是div1。当点击div2的时候，控制台打印输出 我是div2 和 我是div1，在这个时候就说明了当我们子点击div2的时候，div1的事件也被触发了，父级事件被触发，这种现象相当于就是冒泡事件。
- 取消事件冒泡的方式：
- 标准的W3C 方式：
e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可 - 非标准的IE方式:
ev.cancelBubble=true;这里的cancelBubble是 IE事件对象的属性，设为true就可以了
封装取消事件冒泡的函数：
代码如下：
function stopBubble(env){
// 如果提供事件对象，说明为非IE浏览器
if(env && env.stopPropagation){
env.stopPropagation();
}else{
// IE浏览器
window.event.cancelBubble = true;
}
}
取消事件冒泡的实例：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡2</title>
<style>
.d1 {
width: 300px;
height: 300px;
background-color: skyblue;
display: none;
} </style>
</head>
<body> <button id="btn">按钮</button>
<div class="d1"></div> </body>
<script> // 单击动作会从btn传到document中，发生事件冒泡 var btn = document.getElementById("btn");
var d1 = document.getElementsByClassName("d1")[0]; // 点击按钮的时候，元素d1显示
btn.onclick = function(e){
d1.style.display = "block";
// 阻止冒泡
stopBubble(e);
}; // 点击网页其它地方的时候，元素d1隐藏
document.onclick = function(){
d1.style.display = "none";
}; // 阻止浏览器的默认行为函数，事件冒泡
// event.stopPropagation 阻止事件冒泡的方法
function stopBubble(e) {
// 非IE浏览器阻止冒泡
if( e && e.stopPropagation )
e.stopPropagation();
else
// IE浏览器阻止冒泡
window.event.cancelBubble = true;
} </script>
</html>
说明：定义一个按钮，在按钮下面有一个div的元素d1，默认为隐藏。点击按钮的时候，元素d1显示。在点击按钮的时候，调用了阻止事件冒泡的发生函数stopBubble()。点击docume网页其它地方的时候，元素d1隐藏。
三、跨浏览器的事件对象
跨浏览器的事件对象
代码如下：
var EventUtil={
getEvent:function(event){
return event||window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
addEvent:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element["e"+type]=function(){
handler.call(element)
}
element.attachEvent("on"+type,element["e"+type]);
}else{
element["on"+type]=handler;
}
},
removeEvent:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,element["e"+type]);
element["e"+type]=null;
}else{
element["on"+type]=null;
}
}
};
对于js中事件冒泡的理解分析的更多相关文章
- 对JS中事件委托的理解
什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...
- JS中 事件冒泡与事件捕获
[JS中的事件流] 1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点: >>>什么情况下会产生事件冒泡 ① D ...
- js中事件冒泡，事件捕获详解
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
- js中事件冒泡和事件捕获
什么时候存在这种问题? 当一个行为触发了多个对象的事件时. <body> <div class="fa"> <div class=&q ...
- js中事件三阶段
js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- JQuery中事件冒泡
JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
随机推荐
- django项目中cxselect三级联动
下载cxselect插件放在static文件夹下 前端引入 <script src="/static/js/jQuery-1.8.2.min.js"></scri ...
- scanf的返回值
参考这个博客,https://blog.csdn.net/sinat_40936062/article/details/84348021 #include<stdio.h> int mai ...
- E09【餐厅】Can I have the bill,please?
核心句型: Can I have the bill ,please? 请给我账单,好吗? 场景对话: A:Excuse me. Can I have the bill ,please? 你好,请给我账 ...
- Springboot jackSon -序列化-详解
在项目中有事需要对值为NULL的对象中Field不做序列化输入配置方式如下: [配置类型]: 源码包中的枚举类: public static enum Include { ALWAYS, NON_NU ...
- win10系统易升更新不成功c盘也满了，解决方法
删除临时更新文件: 1)同时按下Windows键和R键,打开运行,输入services.msc 2)找到WindowsUpdate服务项,右键选择禁用. 3)打开c:\windows\Software ...
- Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）
表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- leetcode206. 反转链表
1:迭代法 假设存在链表 1 → 2 → 3 → Ø,我们想要把它改成 Ø ← 1 ← 2 ← 3. 在遍历列表时,将当前节点的 next 指针改为指向前一个元素.由于节点没有引用其上一个节点,因此必 ...
- 第02组 Beta冲刺（1/4）
队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...
- 分布式共识算法 (二) Paxos算法
系列目录 分布式共识算法 (一) 背景 分布式共识算法 (二) Paxos算法 分布式共识算法 (三) Raft算法 分布式共识算法 (四) BTF算法 一.背景 1.1 命名 Paxos,最早是Le ...
- <a href="javascript:;">的用法说明
<a href="javascript:;">的用法说明 1.标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 UR ...