事件对象属性

最新推荐文章于 2023-01-11 14:13:18 发布

Issssy

最新推荐文章于 2023-01-11 14:13:18 发布

阅读量181

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Issssy/article/details/128034040

版权

浏览器中的事件都是以对象的形式存在的，在标准的 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>

不同的事件对应的事件属性也不一样，例如鼠标移动相关的事件就有坐标信息，而其他事件就不会包含坐标信息。但是，有些属性和方法是所有事件都会包含的。

事件对象中的常见属性

标准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	只读	按下Shiftl键则为true，否则为false
target	Element	只读	引起事件的元素/对象
type	String	只读	事件的名称

浏览器支持的事件种类非常多，可以分为好几类，每一类里面又有很多事件。事件可以分为以下类别。

用户界面事件:涉及与 BOM 交互的通用月浏览器事件。

焦点事件:在元素获得或失去焦点时触发发的事件。

鼠标事件:使用鼠标在页面上执行某些操操作时触发的事件。

滚轮事件:使用鼠标滚轮时触发的事事件。

输入事件:向文档中输入文本时触发的事件。

键盘事件:使用键盘在页面上执行某些操作时触发的事件。

输入法事件:使用某些输入法时触发的事件。

当然，随着浏览器的发展，事件也会不出新变化，例如移动设备出现以后，就增加了“触摸”事件。

Issssy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件对象属性

不同的事件对应的事件属性也不一样，例如鼠标移动相关的事件就有坐标信息，而其他事件就不会包含坐标信息。浏览器中的事件都是以对象的形式存在的，在标准的 DOM 中，规定事件对象必须作为唯一的参。当然，随着浏览器的发展，事件也会不出新变化，例如移动设备出现以后，就增加了“触摸”事件。键盘事件:使用键盘在页面上执行某些操作时触发的事件。鼠标事件:使用鼠标在页面上执行某些操操作时触发的事件。输入事件:向文档中输入文本时触发的事件。输入法事件:使用某些输入法时触发的事件。滚轮事件:使用鼠标滚轮时触发的事事件。
复制链接

扫一扫