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
