DOM事件

最新推荐文章于 2024-09-14 19:44:09 发布

fuyue266

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量26

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/liu2665438/article/details/132025579

版权

文章详细介绍了JavaScript中的事件机制，包括事件的组成（事件源、事件类型和事件处理函数），DOM0级和DOM2级的事件绑定与解绑方法，以及事件对象的使用，如获取鼠标坐标和键盘按键。还提到了常见的一些事件类型，如点击、滚动和键盘事件，并展示了如何判断组合键的按下情况。

摘要由CSDN通过智能技术生成

事件

之前我们简单的了解过一些事件，比如 onclick / onload / onscroll / ...
今天开始，我们详细的学习一些事件

什么是事件

一个事件由什么东西组成

触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数素

绑定事件的方式

DOM0级

// 事件源.on+事件类型 = 事件处理函数
var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log('你点击了 div')
}

DOM2级

// 事件源.addEventListener(事件类型, 事件处理函数)
var oDiv = document.querySelector('div')

oDiv.addEventListener('click', function () {
  console.log('你点击了 div')
})

取消事件的绑定

DOM0级

// 事件源.on+事件类型 = null
oDiv.onclick = null

DOM2级

// 事件源.removeEventListener(事件类型, 事件处理函数)
function A(){
    console.log('A函数执行了')
}
oDiv.addEventListener('click', A)
oDiv.removeEventListener('click', A)

事件对象

事件对象英文名称event
事件对象一般用于获取事件触发时的详细信息
- 比如用户触发点击事件，点击哪里
- 比如用户按下的按键，按下了那个案件
- ...

获取事件对象

两种获取方式

// 每一个事件处理函数里面自带一个event
var oDiv = document.querySelector('div')

oDiv.onclick = function () {
  console.log(event)
}

// 每一个事件处理函数的第一个形参就是event
var oDiv = document.querySelector('div')

oDiv.onclick = function (e) {
  console.log(e)
}

这两种方式分别在不同浏览器上面兼容性不一样，所以我们一般获取的时候需要兼容性获取

// 每一个事件处理函数里面自带一个event
var oDiv = document.querySelector('div')

oDiv.onclick = function (e) {
  var evt = event || e
  console.log(evt)
}

获取鼠标的坐标

event对象里面有一些信息可以帮助我们获取事件触发时候的详细信息
比如说我们触发点击事件点击鼠标的位置如何获取，有几组坐标可以使用

// 鼠标相对于事件源的坐标
event.offsetX  event.offsetY
// 鼠标相对于浏览器左上角的坐标
event.clientX event.clientY
// 鼠标相对于页面左上角的坐标
event.pageX event.pageY

获取键盘按下的按键

每一个键盘都有一个自己的独有的键盘码keycode`
我们可以通过这个键盘码获取对应用户按下的按键是哪个
因为 FireFox2.0 不支持 keycode 所以要用 which

window.onkeydown = function(e){
	var evt = event || e
	var keyCode = e.keyCode || e.which
	console.log(keyCode)
}

判断组合键

组合按键最主要的就是 alt / shift / ctrl 三个按键
在我点击某一个按键的时候判断一下这三个键有没有按下，有就是组合了，没有就是没有组合
事件对象里面也为我们提供了三个属性
- altKey ：alt 键按下得到 true，否则得到 false
- shiftKey ：shift 键按下得到 true，否则得到 false
- ctrlKey ：ctrl 键按下得到 true，否则得到 false

我们就可以通过这三个属性来判断是否按下了

document.onkeyup = function (e) {
  e = e || window.event
  keyCode = e.keyCode || e.which
  
  if (e.altKey && keyCode === 65) {
    console.log('你同时按下了 alt 和 a')
  }
}