事件对象

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div>123</div>

    <script>
      // 事件对象
      var div = document.querySelector("div");

      div.onclick = function (e) {
        // console.log(e);
        // console.log(window.event);
        // e = e || window.event;
        console.log(e);
      };

      // 效果同上
      // div.addEventListener("click", function (e) {
      //   console.log(e);
      // });

      // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
      // 2. 事件对象只有有了事件才会存在, 它是系统给我们自动创建的, 不需要我们传递参数
      // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息, 
      //    鼠标坐标啊, 如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
      // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
      // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
  </body>
</html>