Mouse Events in JS

eventListener = listen for specific events to create interactive web pages events:

• click
• mouseover
• mouseout .addEventListener(event, callback)

// ======================== 选择元素 ========================
// 获取页面中 id 为 "myBox" 的元素（假设是一个方块区域）
const myBox = document.getElementById("myBox");
// 获取 id 为 "myBtn" 的按钮元素
const myBtn = document.getElementById("myBtn");

📘 第一种写法

// ---------- 方法1：将函数单独定义后传入 ----------
function changeColor(event){
  console.log(event); // 打印事件对象（包括鼠标坐标、点击类型等）
  event.target.style.backgroundColor = "tomato"; // 修改被点击元素背景色
  event.target.textContent = "ouch 🤕"; // 修改文字内容
}
 
// 给 myBox 绑定点击事件（当点击时调用 changeColor）
myBox.addEventListener("click", changeColor);
 
 
// ---------- 方法2：直接在 addEventListener 内定义函数 ----------
myBox.addEventListener("click", function(event){
  event.target.style.backgroundColor = "tomato";
  event.target.textContent = "ouch 🤕";
});

addEventListener(“click”, handler) 用于注册点击事件。 event 是事件对象，包含所有与事件相关的信息。 event.target 表示触发事件的元素（此处是 myBox）。

更简洁的写法:

// ======================== 1️⃣ 点击按钮时 (click) ========================
// 当点击按钮 myBtn 时触发事件
myBtn.addEventListener("click", event => {
  // 修改 myBox 的背景颜色与文字内容
  myBox.style.backgroundColor = "tomato";
  myBox.textContent = "Ouch ! 🤕";
});
 
// ======================== 2️⃣ 鼠标悬停时 (mouseover) ========================
// 当鼠标移到按钮上方时触发
myBtn.addEventListener("mouseover", event => {
  // 改变 box 的背景色与内容
  myBox.style.backgroundColor = "lightyellow";
  myBox.textContent = "Don’t do! 😨";
});
 
// ======================== 3️⃣ 鼠标移出时 (mouseout) ========================
// 当鼠标离开按钮区域时触发
myBtn.addEventListener("mouseout", event => {
  // 恢复 box 的颜色与默认提示文字
  myBox.style.backgroundColor = "lightgreen";
  myBox.textContent = "Click Me 😊";
});