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> ```