浏览器中的事件都是以对象的形式存在的, 在标准的 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 交互的通用月浏览器事件。
焦点事件:在元素获得或失去焦点时触发发的事件。
鼠标事件:使用鼠标在页面上执行某些操操作时触发的事件。
滚轮事件:使用鼠标滚轮时触发的事事件。
输入事件:向文档中输入文本时触发的事件。
键盘事件:使用键盘在页面上执行某 些操作时触发的事件。
输入法事件:使用某些输入法时触发的事件。
当然,随着浏览器的发展,事件也会不出新变化,例如移动设备出现以后,就增加了“触摸”事件。