<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单的制作</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
<script>
window.onload = function() {
// 给按钮和文档添加点击事件。点击按钮div隐藏，点击document则div显示--就会发现无论当你怎么点击div也不会显示出来，是因为事件的冒泡机制
//冒泡的好处:举一个例子 假如给按钮添加点击事件使div隐藏。给页面中除了该按钮的其他元素添加点击事件使div显示。那么问题来了，我们要给那么多的元素添加事件会造成好多麻烦。冒泡的机制可以让我们点击某个元素后触发其父级(父级、父父级等上级)的事件,我们只需要给顶级事件document加上对应事件的处理函数后无论你点击除了Btn元素的其他元素都能触发事件使div隐藏。当给Btn添加事件的时候我们只需将其事件冒泡阻止则不会传递到父级而产生事件的响应
/*
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 冒泡事件只能单独去阻止
*/
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(ev) {
var ev = ev || event;
//调用事件对象的属性
ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡(即执行的oBtn的点击冒泡而不执行其他事件的冒泡--也就是说其他事件的冒泡还会执行)
oDiv.style.display = 'block';
}
/*oBtn.onmouseover = function(ev) {
var ev = ev || event;
ev.cancelBubble = true;
}*/
//点击p标签--p标签会产生点击的动作但是没有点击事件--冒泡传递事件给上级--document接收到点击事件后执行相应的事件处理函数
document.onclick = function() {
//延迟1秒中显示div
/*setTimeout(function() {
oDiv.style.display = 'none';
}, 1000);*/
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<div id="div1"></div>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
</body>
</html>
