javascript必须懂之冒泡事件
在学习javascript中，如果在事件的使用上出现一些反差效果，不良效果，如鼠标的移入移出时，显示你所需要的内容，
但就是没有出现，然而你不断的检查代码，逐个代码查错，还在浏览器的调试工具中调试都没有发现错误，没有看到你所
想要的错误，那么这个时候你要判断一下是不是冒泡事件带来的不良效果了，不过在判断之前，你是不是要知道什么是冒泡事件呢？
接下来冒泡的解释：
冒泡就是从里的事件源一级一级向上触发直到window：
图：
事件源就是你所触发事件在位置的元素，而在这个元素触发了事件，如图你所触发的元素是编号为4的物块，而它就是事件源，
还有事件其实在你没有编写前就给每个元素对象自动添加上，就差你给它添加事件函数了，有个事件函数，它的事件才会有东西
执行，不是只是个空有事件，没有事件函数的事件，这点要搞懂，不是会走进误区！！！！
上面假设的那个冒泡就是从这个编号4的物块一层一层向上冒泡，直到window，而它顺序：
事件来源对象编号4->上级对象编号3->上上级对象编号2->上上上级对象编号1->body->document->window
注意：这个冒泡只和你的HTML结构有关，不能直观的看表现出效果，判断它的某些子元素不会触发冒泡给上层，只要是在
HTML结构里元素就会向上冒泡给上级。
图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
#div1{
background: red;
position: relative;
}
#div2{
position: absolute;
top: 150px;
background: green;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
从图可以直观看一定不知道它们的HTML结构是父子关系，所以会走进误区，以为这两个是独立的块，不会冒泡到其中一个为父级元素，但从代码看，这个就是父子关系，所以触发子级，会冒泡给父级再向上冒泡。
所以这个一定要搞懂。
这就是冒泡；
接下来就是冒泡事件的不良反应，比如你只想触发某个元素的事件，但它的父级或上上级也被你触发了，那么你就要阻止了，
还有就是你的事件加了定时器了，这时你就要注意冒泡的不良反应了，如你想当前元素触发事件但到后代元素后当前元素又再一次触发它的事件，然后又调用到定时器，
然后你的效果就向不理想的现象触发，这是一种不良情况，还有很多，等以后一一自己去体验，而这些的不良效果，都主要阻止冒泡就可以了。
而阻止冒泡前，你要找到你所要阻止的元素，他不一定是你所需效果的元素的位置，可能是它子级的元素，所以你要先找到这个阻止源，然后才是在这个元素放阻止的
方法，一般阻止使用event.cancelBubble=true;即可，现在的主流浏览器都支持，但之前版本的火狐是不支持的，所以如果出现不支持那么请做兼容，event.stopPropagation();
这个是火狐之前版本支持的，当然的现在的版本也支持。
错误代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡</title>
<style>
#div1{
width: 500px;
height: 500px;
margin: 0 auto;
background: red;
}
#div2{
width: 300px;
height: 300px;
margin: 0 auto;
background: green;
}
#div3{
width: 100px;
height: 100px;
margin: 0 auto;
background: #eeeeee;
} </style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(ev){
ev=ev||event;
this.style.background="#000";
}
oDiv.onmouseout=function(ev){
timer=setTimeout(function(){
oDiv.style.background="red";
},1000); }
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
执行这些代码一定发现问题；
阻止冒泡后修改的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<style>
#div1{
width: 500px;
height: 500px;
margin: 0 auto;
background: red;
}
#div2{
width: 300px;
height: 300px;
margin: 0 auto;
background: green;
}
#div3{
width: 100px;
height: 100px;
margin: 0 auto;
background: #eeeeee;
} </style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oDiv1=document.getElementById("div2");
var oDiv2=document.getElementById("div3");
var timer=null;
oDiv1.onmouseover=function(){
clearInterval(timer);
}
oDiv1.onmouseout=function(ev){
ev=ev||event;
ev.cancelBubble=true;
}
oDiv2.onmouseout=function(ev){
ev=ev||event;
ev.cancelBubble=true;
} oDiv.onmouseover=function(ev){
ev=ev||event;
this.style.background="#000";
}
oDiv.onmouseout=function(ev){
timer=setTimeout(function(){
oDiv.style.background="red";
},1000); }
} </script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
之于定时器的是什么，自己去普及。
OK~大体的说了说。
冒泡有不少好处，事件委托就是其一；
事件委托：
事件委托就是使用父级为子级干事，它的核心是利用冒泡，还有事件源属性使用event.srcElement,它需要去兼容，还有个属性是event.target,
兼容例子：
var obj=event.srcElement||event.target;
它有个好处是如果你动态的为父级添加子标签，那些添加的子标签都可以使用这些事件方法，也能触发这些事件，就像动态的添加函数一样，使它们都有自己的事件。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style>
#m1{
width:200px;
background:#0F6;
overflow:hidden;
margin:60px auto;
}
li{
width:100px;
height:50px;
margin:50px auto 50px;
text-align:center;
line-height:50px;
border:2px solid #999;
cursor:pointer;
}
</style>
</head>
<ul id="m1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<input type="button" id="btn" value="添加" />
<script>
var num=6;
var btn=document.getElementById("btn");
var m1=document.getElementById("m1");
m1.onmouseover=function(){
var e=event||window.event;
var obj=e.srcElement||e.target;
if(obj.nodeName.toLowerCase()=="li"){
obj.style.background="#ff0";
}
};
m1.onmouseout=function(){
var e=event||window.event;
var obj=e.srcElement||e.target;
obj.style.background="";
};
btn.onclick=function(){
num++;
var li=document.createElement("li");
li.innerHTML=111*num;
m1.appendChild(li);
};
</script>
<body>
</body>
</html>
到此为止了。
还有事件捕获在待定中。。。
javascript必须懂之冒泡事件的更多相关文章
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- JavaScript 兼容各大浏览器阻止冒泡事件
JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- javascript冒泡事件详解
冒泡事件: 定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级, ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- JS 阻止浏览器默认行为和冒泡事件
JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href=& ...
- jQuery之防止冒泡事件
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 方法1: event.stopPropagation(); // 阻止事件冒泡 有时候点击提交按钮会有一些默认事件.但是如果没有通过验证 ...
随机推荐
- AIX主机信任关系配置
1.配置主机信任关系的时候,需要先在两台主机/etc/hosts文件中添加要信任主机的IP,假设有(192.168.8.190 aix190,192.168.8.191 aix191)2个主机,在19 ...
- OA项目之导入
内容显示页: protected void btnIMP_Click(object sender, EventArgs e) { Response.Redire ...
- IAP 破解漏洞验证
IAP支付有个漏洞,用户使用的可能是IAP Free 或者俄罗斯破解什么的,所产生的交易号:170000029449420 product_id:com.zeptolab.ctrbonus.super ...
- 云计算和大数据时代网络技术揭秘（十二）自定义网络SDN
软件定义网络——SDN SDN是网络技术热点,即软件定义网络,OpenFlow是实现SDN思想的一个框架标准, open是指公开.开放,具体为控制平面的规则由各个通信厂家自定义变为公开的技术标准, f ...
- link,unlink,remove, rename函数
link函数:创建一个指向现有文件的链接的方法是使用 个人理解为cp命令 #include <unistd.h> int link( const char *existingpath, c ...
- Windows 8.1 应用再出发 - 磁贴的更新
本篇和大家一起了解一下Windows 8.1 中磁贴的更新,我们来看看如何利用它做出更好的应用磁贴. 首先我们从展现形式上来对比一下Windows 8 与 Windows 8.1 中的磁贴: Wind ...
- 快来玩“Gift大转盘”百分百赚好礼
现在开始到今年的最后一天,你天天都可以来转100%中奖的“ Gift大转盘 ”.代金券.产品折扣.精美纪念礼,没有多余规则.全部网友都可参加,转到就是你赚到,赶快转起来吧! >>活动主页& ...
- tomcat 虚拟主机配置
1.虚拟主机 服务器接收到客户端请求时,会根据HTTP请求报文中的HOST头选择web站点进行响应.发送请求时,url中的主机名会被作为HTTP请求报文中的HOST发送给服务器.因此,可以根据不同的H ...
- jQuery.Callbacks之源码解读
在上一篇jQuery.Callbacks之demo主要说了Callbacks对象初始化常见的选项,这一篇主要分析下Callbacks对象的源代码,对给出两个较为繁琐的demo // String to ...
- Mac 快捷键整理
Mac 快捷键整理 文本编辑 适用于文本编辑器,浏览器等 跳到页首 cmd + ↑ 类似windows下的 ctrl + home 跳到页尾 cmd + ↓ 类似windows下的 ctrl + en ...