事件对象属性_事件对象里面常用属性-CSDN博客

本文链接：https://blog.csdn.net/hyk495495/article/details/128047452

浏览器中的事件都是以对象的形式存在的，在标准的DOM中，规定事件对象必须作为唯一的参数传给事件处理函数。下面代码显示了如何使用标准的DOM提供的方法处理事件。使用Vue.js能够方便地实现相同地功能，并且事件对象是一样的。

<body>
<div id="target">
  <p>click p </p>
  click div
</div>
<script>
document
  .querySelector("div#target")
  .addEventListener('click',
    (event) => {
      console.log(event.target.tagName)
    }
  );
</script>
</body>

上面的代码首先根据CSS选择器在页面中选中了一个对象，然后给它绑定事件侦听函数，可以看到，箭头函数的参数就是“事件对象”，事件对象描述了事件的详细信息，开发者可以根据这些信息进行相应的处理，实现特定功能。

事件对象中常见属性

标准Dom	类型	读/写	说明
altKey	Boolean	读写	按下Alt键则为true，否则为false
button	Integer	读写	鼠标事件，值对应按下的鼠标键
cancelable	Boolean	只读	是否可以取消事件的默认行为
stopPropagation()	Function	N/A	阻止事件向上冒泡
clientX	Integer	只读	鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏、滚动条等
clientY	Integer	只读	鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏、滚动条等
ctrlKey	Boolean	只读	按下Ctrl键则为true，否则为false
relatedTarget	Element	只读	鼠标正在进入/离开的元素
charCode	Integer	只读	按下按键的Unicode值
keyCode	Integer	读写	按下按键时为0，其余情况下按下按键的数字代号
detail	Integer	只读	鼠标按键的单机次数
preventDefault()	Function	N/A	阻止事件的默认行为
screenX	Integer	只读	鼠标相对于屏幕的水平坐标
screenY	Integer	只读	鼠标相对于屏幕的垂直坐标
shiftKey	Boolean	只读	按下shift键则为true，否则为false
target	Element	只读	引起事件的元素/对象