用js写一个事件侦听器的方法

// 方法一：addEventListener (推荐)

// 获取要添加事件侦听器的元素
const element = document.getElementById("myElement"); // 或者其他选择器，例如：document.querySelector(".myClass")

// 添加事件侦听器
element.addEventListener("click", function(event) {
  // 处理点击事件的代码
  console.log("元素被点击了！");
  console.log(event); // event 对象包含有关事件的信息
});


// 可以添加多个事件侦听器到同一个元素上
element.addEventListener("mouseover", function() {
  console.log("鼠标悬停在元素上");
});


// 移除事件侦听器 (需要传入和添加时相同的函数)
function handleClick(event) {
  console.log("再次点击！");
}

element.addEventListener("click", handleClick);

// ...一段时间后...

element.removeEventListener("click", handleClick);



// 方法二：on<event> 属性 (不推荐，但有时会用到)

// 直接在 HTML 元素上设置
// <button id="myButton" onclick="handleClick()">点击我</button>

// 或者在 JavaScript 中设置
const myButton = document.getElementById("myButton");
myButton.onclick = function() {
  console.log("按钮被点击了！");
};

// 这种方法的缺点是，每个事件类型只能绑定一个处理函数。
// 新的处理函数会覆盖旧的。


// 方法三：attachEvent (IE8 及更早版本)

// 仅用于兼容非常老的 IE 浏览器
if (element.attachEvent) {
  element.attachEvent("onclick", function() {
    console.log("元素被点击了！ (IE8)");
  });
}


//  一些额外的说明:

// 1. 事件对象 (event):  在事件处理函数中，可以访问 `event` 对象，它包含有关事件的信息，例如：
//    - event.target: 触发事件的元素
//    - event.type: 事件类型 (例如 "click", "mouseover")
//    - event.clientX/clientY: 鼠标指针的坐标


// 2. 事件冒泡和捕获:  事件在 DOM 树中传播的方式。可以使用第三个参数来控制是在捕获阶段还是冒泡阶段处理事件。
//    element.addEventListener("click", myFunction, true); // 捕获阶段
//    element.addEventListener("click", anotherFunction, false); // 冒泡阶段 (默认)


// 3.  preventDefault():  阻止事件的默认行为。例如，阻止链接的跳转。
element.addEventListener("click", function(event) {
  event.preventDefault();
  console.log("阻止了默认行为");
});


// 4. stopPropagation(): 阻止事件冒泡到父元素。
element.addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("阻止了事件冒泡");
});