事件对象 js-CSDN博客

本文链接：https://blog.csdn.net/weixin_50018442/article/details/141184212

事件对象也是个对象，这个对象有事件触发时的相关信息，包括属性和方法。
例如鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。

使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻。
可以判断鼠标点击哪个元素，从而做响应的操作。


<body>
  <div class="box"></div>
  <textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea>
  <script>
    // 事件对象
    const box = document.querySelector('.box')
    box.addEventListener('click', function (e) {
      console.log(e)
    })
    const tx = document.querySelector('#tx')
    tx.addEventListener('keyup', function (e) {
      // e 就是事件对象
      // console.log(e)
      // console.log(e.key)  // a 
      // 用户如果按下的是回车键，则弹出框提示按下了回车键
      if (e.key === 'Enter') {
        alert('您按下了回车键')
      }
    })
  </script>
</body>

事件回调函数【第1个参数】即所谓的事件对象，通常习惯性地将这个对象命名为event,ev,e

属性名	类型	说明
altkey	boolean	事件发生时是否按下alt按键
ctrlkey	boolean	事件发生时是否按下ctrl按键
shiftkey	boolean	事件发生时是否按下shift按键
offsetX	number	事件发生时，鼠标相对于事件源的x坐标
offsetY	number	事件发生时，鼠标相对于事件源的y坐标
target	object	事件源对象
pageX	number	事件发生时，鼠标相对于网页的x坐标
pageY	number	事件发生时，鼠标相对于网页的y坐标
clientX	number	事件发生时，鼠标相对于视口的x坐标
clientY	number	事件发生时，鼠标相对于视口的y坐标
key	string	如果是键盘相关事件，则事件对象中包含该属性，表示键盘事件发生时，按下的是什么键，'Enter'回车键