解析Javascript事件冒泡机制
来源:互联网 发布:钓鱼网络是什么意思 编辑:程序博客网 时间:2024/06/05 18:15
1. 事件
2.冒泡机制
简单案例分析
下面通过一个简单的例案例来阐述冒泡原理:
- <</span>span
style="font-family:Microsoft YaHei;font-size:10px;" ><</span>bodyid="body"> -
<</span>div id="box1" class="box1"> -
<</span>div id="box2" class="box2"> -
<</span>span id="span">This is </</span>span>a span. -
</</span>div> -
</</span>div> - </</span>body></</span>span>
界面原型如下:
a.body添加 click 事件监听,当body捕获到event事件时,打印出事件发生的时间和 触发事件的节点信息:
- <</span>script
type="text/javascript"> -
window.onload = function(){ -
document.getElementByIdx_x("body").addEventListener("click",eventHandler); -
} -
function eventHandler(event) { -
console.log("时间:"+new Date(event.timeStamp)+" 产生事件的节点:" + event.target.id +" 当前节点:"+event.currentTarget.id); -
} - </</span>script>
当我们依次点击"This is span",div2,div1,body后,输出以下信息:
分析以上的结果:
完整的html代码如下:
- <</span>span
style="font-family:Microsoft YaHei;font-size:10px;" >> - <</span>html>
- <</span>head>
- <</span>meta
charset="UTF-8"> - <</span>script
type="text/javascript" src="js/jquery-1.11.0.js"></</span>script> - <</span>title>Insert
title </</span>title>here - <</span>style
type="text/css"> - .box1
{ -
border: green 40px solid; -
width: 300px; -
height: 300px; -
margin: auto; - }
-
- .box2
{ -
border: yellow 40px solid; -
width: 220px; -
height: 220px; -
margin: auto; - }
-
- span
{ -
position: relative; -
left: 50px; -
top: 50px; -
background-color: rgba(128, 128, 128, 0.22); - }
- </</span>style>
-
- <</span>script
type="text/javascript"> -
window.onload = function(){ -
document.getElementByIdx_x("body").addEventListener("click",eventHandler); -
} -
function eventHandler(event) { -
console.log("时间:"+new Date(event.timeStamp)+" 产生事件的节点:" + event.target.id +" 当前节点:"+event.currentTarget.id); -
} - </</span>script>
-
- </</span>head>
- <</span>body
id="body"> -
<</span>div id="box1" class="box1"> -
<</span>div id="box2" class="box2"> -
<</span>span id="span">This is </</span>span>a span. -
</</span>div> -
</</span>div> - </</span>body>
- </</span>html></</span>span>
b.终止事件的冒泡
- <</span>span
style="font-family:Microsoft YaHei;font-size:10px;" ><</span>scripttype="text/javascript"> -
window.onload = function(){ -
document.getElementByIdx_x("box1").addEventListener("click",function(event){ -
; -
}); -
document.getElementByIdx_x("box2").addEventListener("click",function(event){ -
; -
}); -
document.getElementByIdx_x("span").addEventListener("click",function(event){ -
; -
}); -
} - </</span>script></</span>span>
这显然不是我们想要的! 我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢? 原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。现在问题是发现了,但是怎么解决呢?
- <</span>span
style="font-family:Microsoft YaHei;font-size:10px;" ><</span>scripttype="text/javascript"> -
window.onload = function(){ -
document.getElementByIdx_x("box1").addEventListener("click",function(event){ -
; -
event.stopPropagation(); -
}); -
document.getElementByIdx_x("box2").addEventListener("click",function(event){ -
; -
event.stopPropagation(); -
}); -
document.getElementByIdx_x("span").addEventListener("click",function(event){ -
; -
event.stopPropagation(); -
}); -
} - </</span>script></</span>span>
- <</span>span
style="font-family:Microsoft YaHei;font-size:10px;" ><</span>scripttype="text/javascript"> -
window.onload = function(){ -
document.getElementByIdx_x("box1").addEventListener("click",function(event){ -
if(event.target == event.currentTarget) -
{ -
; -
} -
}); -
document.getElementByIdx_x("box2").addEventListener("click",function(event){ -
if(event.target == event.currentTarget) -
{ -
; -
} -
}); -
document.getElementByIdx_x("span").addEventListener("click",function(event){ -
if(event.target == event.currentTarget) -
{ -
; -
-
} -
}); -
} - </</span>script></</span>span>
还有就是为每一个元素都有处理函数,在一定程度上增加逻辑和代码的复杂度。
- "text/javascript">
-
window.onload = function() { -
document.getElementByIdx_x("body").addEventListener("click",eventPerformed); -
} -
function eventPerformed(event) { -
var target = event.target; -
switch (target.id) { -
case "span": -
alert("您好,我是span。"); -
break; -
case "div1": -
alert("您好,我是第二层div。"); -
break; -
case "div2": -
alert("您好,我是最外层div。"); -
break; -
} -
} -
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析JavaScript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- 解析Javascript事件冒泡机制
- JavaScript 事件冒泡机制
- Javascript事件冒泡机制
- javascript 事件冒泡机制
- javascript 事件冒泡机制
- JavaScript事件传播(冒泡机制)
- 解析JavaScript的事件机制
- Javascript中事件捕获、事件冒泡以及事件委托机制
- php万年历
- Gson将字符串转map时,int、long默认为double类型
- 二维码和条形码
- vue学习笔记【基础篇一】
- 【Oracle 12c ASM专题】配额组的配额真的管用吗?
- 解析Javascript事件冒泡机制
- c++初级 之 c++的继承性
- IO
- 构建简易网络与网络设备的简单配置(Cisco Packet Tracer)第一弹:交换机VLAN配置
- Open Live Writer的配置
- jquery之select2.js控件
- js 函数表达式-递归 小例子
- APS.NET MVC4生成解析二维码简单Demo
- popupWindow不获取焦点ListView获取焦点