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