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(); // 阻止事件冒泡 有时候点击提交按钮会有一些默认事件.但是如果没有通过验证 ...
随机推荐
- Dev GridControl数据导出格式问题
环境:DevExpress9.3,Vs2008 DevExpress的GridControl提供方便的数据导出到Excel功能,导出中用户可以根据GridControl的格式进行导出(ExportTo ...
- c# 集合适配器
using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...
- php array转json、xml
class Encode{ public static function jsonEncode($code,$message,$data){ $result = array( 'code' => ...
- document.write()
以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉 ...
- js 根据年月获取当月有多少天_js获取农历日期_及Js其它常用有用函数
//根据年月获取当月有多少天 function getDaysInMonth(year, month) { debugger; //parseInt(number,type)这个函数后面如果不跟第2个 ...
- 斯坦福第七课：正则化(Regularization)
7.1 过拟合的问题 7.2 代价函数 7.3 正则化线性回归 7.4 正则化的逻辑回归模型 7.1 过拟合的问题 如果我们有非常多的特征,我们通过学习得到的假设可能能够非常好地适应训练集( ...
- mono for android代码记录1 WebClient Post数据到Nopcommerce(post数据到MVC5)
WebClient Post数据到Nopcommerce(post数据到MVC5) 注意事项 1.把[ValidateAntiForgeryToken]注释掉,以后再处理CSRF攻击.现在学习先不理 ...
- Google Chrome: Make the Bookmarks Bar Display as Icons Only
By reducing your bookmarks to show only the icons, you can access more of them from the Bookmarks ba ...
- hexo框架-next主题-github搭建个人博客
IT`huhui 的前言录 我在GITHUB的个人站点:http://ithuhui.cn 这里遇到的很多问题都是亲身解决后写的.还有遇到不懂可以邮件M我 在这里要感谢浮生志的博客教程,很多我一开始不 ...
- SQLSERVER truncate table之后是否会重置表的自增值
SQLSERVER truncate table之后是否会重置表的自增值 今天清理业务库数据的时候,开发人员说可以使用truncate table把两个表的所有数据清理掉 这两个表都有自增ID,都做了 ...