1 什么是event对象
用来获取时事件的详细信息：鼠标位置，键盘位置
2 获取event对象(兼容性写法)
var oEvent = ev || event;哪个为真取哪个
- ev：火狐
- event：IE 和其他浏览器高版本
3 事件冒泡
HTML
<!DOCTYPE html>
<html onclick="alert('html')">
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
div{
padding: 100px;
}
</style>
</head>
<body onclick="alert('body')">
<div style="background-color: gray" onclick="alert(this.style.backgroundColor)">
<div style="background-color: green" onclick="alert(this.style.backgroundColor)">
<div style="background-color: rosybrown" onclick="alert(this.style.backgroundColor)">
</div>
</div>
</div>
</body>
</html>
效果
maopao.gif
4 取消冒泡
oEvent.cancleBubble = true;不向父级传递事件
Ex
做一个效果，点按钮出现一个下拉菜单，点页面其他空白位置，使下拉菜单hide
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>取消冒泡</title>
<script>
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
btn.onclick = function(ev){
div.style.display = "block";
var myEvent = ev || event;
myEvent.cancelBubble = true;
}
// document.onclick 而不能用body.onclick （body需要有内容才能响应事件）
document.onclick = function(){
div.style.display = "none";
}
}
</script>
</head>
<body>
<button>选择</button>
<div style="width: 200px;height: 200px;background-color: #888888;margin: 20px 0;display: none">
</div>
</body>
</html>
效果
cancleBubble.gif
