超级实习生计划学习打卡第5天：事件总结

最新推荐文章于 2025-04-23 11:38:43 发布

123木头1

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量99

点赞数 2

文章标签：学习

本文链接：https://blog.youkuaiyun.com/weixin_32423232/article/details/124827783

版权

本文详细介绍了JavaScript中的事件基础，包括行内事件属性赋值、事件属性赋值和事件监听。同时，深入讲解了鼠标事件如click、contextmenu、dbclick等，以及键盘事件keydown、keypress。此外，还探讨了键盘事件的属性keyCode、charCode和key，并通过实例展示了它们在不同事件中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件基础

1.行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2.事件属性赋值

var btn=document.querySelector('button');
btn.onclick=fuction(){
    alert('事件属性赋值')
}

3.事件监听

//type：事件类型
//listener:监听器（处理程序）
//useCapture:默认为false,设置为true是不会因冒泡触发监听器
const btn = ducment.querySelector('button');
btn.adadEventListener('click',fuction(){
    alert('事件监听')
})

二、鼠标事件
使用事件属性赋值时，变成class1.onxxxx
click；单击鼠标触发。

contextmenu; 右键点击

dbclick; 双击左键触发

mouseenter; 指针移至元素范围内触发一次

mouseleave; 指针移出元素范围外触发移除

mouseover; 指针移至元或其子元素内，可能触发多次

mouseout; 指针移出元素，或者移至其子元素内，可能触发多次

over与out在指针进入子级时会进行触发，无特殊要求下建议使用enter和leave

三、键盘事件
使用事件属性赋值时，变成class1.onxxxx
1.keydown；按下任意键，按住可连续触发

2.keypress;按下按键触发，按住可连续触发，不能监听一些特殊按键（ALT/CTRL/SHIFT/ESC等）

四、键盘事件属性
1.keyCode;返回keypress事件触发的键的值的字符代码，或者keydown或keydown或keyup事件的键盘代码；

字符代码：ASCII字符的数字

键盘代码：键盘上真实键的数字

2.charCode；返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0

3.key:返回按键标识符（区分大小写）；keypress/keyup/keydown返回值相同

var input = document.querySelector('input')
input.addEvementListener('keydown',fuction(e){
    console.log(e.keyCode);//65
    console.log(e.charCode);//0
    console.log(e.key);//a
})input.addEvementListener('keypress',fuction(e){
    console.log(e.keyCode);//97
    console.log(e.charCode);//97
    console.log(e.key);//a
})input.addEvementListener('keydown',fuction(e){
    console.log(e.keyCode);//65
    console.log(e.charCode);//0
    console.log(e.key);//a
})