Event 对象和事件 · JavaScript学习记录

### Event 对象和事件冒泡 - 什么是 Event 对象 - 用来获取鼠标/键盘事件的信息：**鼠标位置、键盘按键** - 例子：获取鼠标位置：`clientX` - `document` 的本质是整个网页：`document.childNodes[0].tagName = '<!DOCTYPE>'` - `body` 不加事件，因为没有内容就没高度 - 获取 `Event` 对象**（兼容性写法）** - `var oEvent = ev||event;` 火狐用 `ev` / IE 用 `event` - 事件函数把事件对象最为参数传入：`btn.onclick = function(ev) { var oEvent = ev||event;}` - 事件流 - 事件流冒泡：事件往父级传递 - 取消冒泡：`oEvent.cancelBubble = true` - 例子：仿 `select` 控件 - `DOM` 事件流 - 代码： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>键盘事件和仿select下拉框</title> <link rel="stylesheet" href="../reset.css"> <style> #div1 { width: 200px; height: 200px; position: absolute; background-color: rgb(255, 0, 0); display: none; } </style> <script> // 封装 getElementById 函数 function get(id) { return document.getElementById(id); } window.onload = function () { var oDiv = get('div1'); var btn = get('btn'); btn.onclick = function (ev) { var oEvent = ev||event; oDiv.style.display = 'block'; console.log(this); oEvent.cancelBubble = true; } document.onclick = function () { oDiv.style.display = 'none'; console.log(this); } } </script> </head> <body> <input type="button" value="显示" id="btn"> <div id="div1"></di'v> </body> </html> ```