事件的分类

wdcsd_

于 2022-11-02 19:39:48 发布

阅读量238

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wdcsd_/article/details/127657474

版权

1、页面事件

（1）load：页面加载事件，用于body内所有标签都加载完成后才触发

（2）unload：用于页面关闭时触发，经常用于清除变量，避免内存泄露

2、焦点事件：多用于表达验证

（1）focus：当获得焦点时触发

（2）blur：失去焦点时触发

let name =document.querySelector('#userName')
let pwf = document.querySelector('#pwd')

name.addEventListener('blur',function(){
let span = document.querySelector('#nameInfo')
if(this.value === 'abc'){//用户名正确
span.classList.remove('fail')
span.innerHTML = '用户名正确'
span.classList.add('ok')

}else{
span.classList.remove('fail')
span.innerHTML = '用户名错误'
span.classList.add('fail')
}
})

pwf.addEventListener('blur',function(){

let scrt = document.querySelector('#pwdInfo')

if(this.value.length >=6 && this.value.length <= 16){

scrt.classList.remove('fail')
scrt.innerHTML = '密码正确'
scrt.classList.add('ok')

}else{
scrt.classList.remove('fail')
scrt.innerHTML = '密码错误'
scrt.classList.add('fail')
}
})
</script>

3、鼠标事件

（1）click：鼠标单击

（2）dblclick：鼠标双击

（3）mouseover：鼠标进入

（4）mouseout：鼠标离开

（5）change：当内容发生改变时触发---input、select

实例：通过select改变页面背景色

<select id="changeColor">
<option value="%">请选择</option>
<option value="blue">蓝色妖姬</option>
<option value="red">血腥玛丽</option>
<option value="green">青青草原</option>
</select>
<script>
let select = document.querySelector('#changeColor')
select.addEventListener('change',function(){
document.body.style.backgroundColor = this.value
})
</script>

(6) mousedown：当按下任意鼠标按键时触发

(7) mouseup：当释放任意鼠标按键时触发

（8）mousemove：在元素内当鼠标移动时持续触发

4、在鼠标事件中、鼠标的位置信息的获取

（1）client X：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（x轴坐标）

（2）clientY：鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）

（3）pageX：鼠标指针位于文档的水平坐标（x轴坐标）

（4）pageY：鼠标指针位于文档的垂直坐标（Y轴坐标）

（5）screenX：鼠标指针位于屏幕的水平坐标（x轴坐标）

（6）screenY：鼠标指针位于屏幕的垂直坐标（Y轴坐标）

课堂练习：当鼠标在浏览器窗口移动时，在鼠标指针旁边显示指针的坐标

</div>
<script>
window.onload = function(){
//获取div
let div = document.querySelector('#dt')
//给document绑定mousemove事件
document.onmousemove = function(e){
//获取鼠标指针在浏览器可视窗口中的坐标
let my_left = e.clientX
let my_top = e.clientY
//修改div的坐标
div.style.left = (my_left + 10)+'px'
div.style.top = my_top+'px'
//设置div的内容
div.innerHTML = `(${my_left},${my_top})`

}
}
</script>

强调：事件对象的兼容性处理

（一）早期IE浏览器版本获取事件对象的方法：window.event

标准浏览器获取事件对象的方法：event

DOM对象：addEventListener（'事件名称'，function（e）{

let my_event = e.window.event

}）

（二）早期IE浏览器对象pageX和pageY的兼容性处理

varpagex = event.pageX || event.clientX+document.documentElement.scrollLeft

varpageY = event.pageY|| event.clientY+document.documentElement.scrollTop

鼠标在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度

5、键盘事件：用户在使用键盘时触发

（1）keypress：键盘上按键按下触发时，不包含非字符按键，保存按键的ASCLL码值

（2）keydown：键盘上按键按下时触发

（3）keyup：键盘按键弹起时触发

6、表单事件：操作表单时触发

（1）submit：当表单提交时触发

（2）reset：当表单重置时触发

document.addEventListener('keypress',function(e){
console.log('keypress:',e.keyCode)
})
document.addEventListener('keydown',function(e){
console.log('keydown:',e.keyCode)

if(e.altKey){
alert('Alt')
}
if(e.ctrlKey){}
if(e.shiftKey){}

console.log(e)
console.log(e.code)
console.log(e.key)
})
document.addEventListener('keyup',function(e){
console.log('keyup:',e.keyCode)
})