<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="description" content="" /> <title>事件</title> <style> * { margin: 0; padding: 0; } #box { width: 300px; height: 300px; background: skyblue; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById("box"); // 单击事件 box.onclick = function() { alert("我被单击啦！"); } // 鼠标划入 onmouseenter / onmouseover 鼠标划入事件 box.onmouseover = function() { console.log("鼠标划入！"); } // 鼠标划出 onmouseleave / onmouseout 鼠标划出事件 box.onmouseout = function() { console.log("======划出======"); } // 鼠标移动 onmousemove // 左键双击 ondblclick // 键盘按下某键 onkeydown // 键盘抬起某键 onkeyup // 失去焦点 onblur // 得到焦点 onfocus // 窗口大小被改变 onresize window.onresize = function() { console.log("窗口大小被改变啦！"); } </script> </body> </html>