事件冒泡机制
Posted xiaoxiaoyao61
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡机制相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<!--
作者：[email protected]
时间：2017-10-24
描述：
事件处理，冒泡机制
-->
<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>
以上是关于事件冒泡机制的主要内容，如果未能解决你的问题，请参考以下文章
[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播