html-事件
阿新 • • 發佈:2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 50px; height: 50px; background: #b864ff; } </style> </head> <body> <div id="box"></div> <script> /* 所謂事件,是指 JavaScript 捕獲到使用者的操作,並做出正確的響應。 在事件函式裡面,有一個關鍵字this,代表當前觸發事件的這個元素 事件:使用者的操作 元素.事件 = 函式; 滑鼠事件: 左鍵單擊 onclick 左鍵雙擊 ondblclick 滑鼠移入 onmouseover/onmouseenter *** 滑鼠移出 onmouseout/onmouseleave ****/ var oBox = document.getElementById("box"); oBox.onclick = function () { alert("我被點選了"); }; oBox.onmouseenter = function () { console.log("我被滑鼠移入啦"); this.innerHTML = "<h1>1</h1>"; // oBox.innerHTML = "<h1>1</h1>";}; oBox.onmouseleave = function () { console.log("我被滑鼠移出啦"); } </script> </body> </html>