事件冒泡机制

　　　　　　　　　　　　　　　　　　事件处理，冒泡机制

默认是存在的。

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
img{display: none;}
</style>
<script>
window.onload=function()
{
/*现象：
*这里以图片作为例子，日常中，如下拉菜单，当鼠标在菜单内时，菜单会显示，当鼠标离开时菜单缩回，这里
* 以点击按钮图片显示，点击文档其它地方图片隐藏为例子，会发现，功能无法实现，点击按钮图片无法显示。
* 原因：
* 因为有事件冒泡机制--------“当一个元素接收到事件时，会把接收到的所有传播给父级，父级也向上传递”
* 这里button的某一辈父级就是document，所以也触发了document的点击事件，不是图片没有显示，而是在很短的
* 时间内图片显示又隐藏。可以添加一个settimtout来放慢看
* 不能理解为button在document内，点击button同时也点击doc,这里要从元素的层级关系来看。
*/
var obtn=document.getElementById("btn");
var oimg=document.getElementById("img1");
obtn.onclick=function()
{
oimg.style.display="block";
}
document.onclick=function()
{
oimg.style.display="none";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击出现" />
<img id="img1" src="img/1.jpg" />
</body>
</html>

/*阻止事件冒泡：
* 事件冒泡发生在下面的函数，只需要
* 1、添加事件对象参数e
* 2、考虑到浏览器兼容问题 e||event
* 3、设置事件对象的 e.cancelBubble=true;
obtn.onclick=function(e)
{
var e=e||event;
oimg.style.display="block";
}
*/

本人小白，博客作为在线笔记，若有错误，还望指出，转载链接截图等皆为学习，若有侵权，请告知，