鼠标事件
click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件，移入和移出其子元素时也会触发。
mouseout：移出事件，移入和移出其子元素时也会触发。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件。
- mouseover 和 mouseenter 都是鼠标移入事件，区别在于 mouseeenter 只触发一次，mouseover 子元素连带触发。
- 鼠标事件属性：代表鼠标事件发生时是否按下了对应的键盘按键，返回 Boolean 值
MouseEvent.altKey
MouseEvent.ctrlKey
MouseEvent.metaKey
MouseEvent.shiftKey - MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。
0 代表左键
1 代表中键
2 代表右键 - MouseEvent.clientX，MouseEvent.clientY
MouseEvent.clientX 属性返回鼠标位置相对于浏览器窗口左上角的水平坐标，
MouseEvent.clientY 属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标，
这两个属性都是只读属性。 - MouseEvent.offsetX，MouseEvent.offsetY
MouseEvent.offsetX 属性返回鼠标位置距离事件作用对象左侧边缘的水平距离，
MouseEvent.offsetY 属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，
这两个属性都是只读属性 - MouseEvent.movementX，MouseEvent.movementY(了解)
MouseEvent.movementX 属性返回上一个 mousemove 事件与当前 mousemove 事件间的水平位移，
MouseEvent.movementY 属性返回上一个 mousemove 事件与当前 mousemove 事件的垂直距离。
这两个属性都是只读属性。
e.screenX,e,screenY
距离屏幕的水平和垂直距离
鼠标滚轮事件
滚轮事件在火狐浏览器中是DOMMouseScroll，而在其他浏览器中是onmousewheel。
向上下滚就保存到e.detail里面
火狐：e.detail 滴太哦
向上滚动返回值为大于0
向下滚动返回值为小于0
非火狐：e.wheelDelta 带哦特
向上滚动返回值为小于0
向下滚动返回值为大于0
键盘事件
- keydown：表示用户按下按键时触发的事件
- keyup：表示用户按下按键盘抬起时发生的动作
- keypress：表示用户摁下摁键，并且产生一个字符时发生的动作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.outer {
height: 500px;
width: 500px;
border: 1px dashed #dfdfdf;
}
.inner {
width: 500px;
height: 200px;
}
.ball {
transform: translate(100px, 20px);
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
<button class="ball">ball</button>
</div>
<script>
const outer = document.getElementsByClassName('outer')[0]
const inner = document.getElementsByClassName('inner')[0]
const ball = document.getElementsByClassName('ball')[0]
outer.onmouseover = function() {
console.log(this.className, ': mouseover')
}
outer.onmouseenter = function() {
console.log(this.className, ': mouseenter')
}
inner.onmouseover = function() {
console.log(this.className, ': mouseover')
}
inner.onmouseenter = function() {
console.log(this.className, ': mouseenter')
}
outer.onclick = function(e) {
e = e || window.event
console.log("altKey:"+e.altKey); //是否按下alt键
console.log("ctrlKey:"+e.ctrlKey); //是否按下Ctrl键
console.log("metaKey:"+e.metaKey); //是否按下meta键
console.log("shiftKey:"+e.shiftKey); //是否按下shift键
}
outer.onmousedown = function(e) {
e = e || window.event
console.log(e.button)
}
ball.onmousedown = function(e) {
e = e || window.event
console.log(e.clientX, '----', e.clientY) // 相对可视窗口
console.log(e.offsetX, '++++', e.offsetY) // 相对目标元素
console.log(e.pageX, '====', e.pageY) // 相对文档
}
document.onkeyup = function(e) {
e = e || window.event
if(e.keyCode == 37) {
console.log('左键')
} else if(e.keyCode == 38) {
console.log('上键')
} else if(e.keyCode == 39) {
console.log('右键')
} else if(e.keyCode == 40) {
console.log('下键')
}
}
</script>
</body>
</html>
网友评论