JS的常用键盘事件与事件模型_js 覆盖键盘事件-CSDN博客

本文链接：https://blog.csdn.net/chihuomiao/article/details/124945417

本文介绍了HTML中的键盘事件，如onkeyup、onkeydown和onkeypress，强调了onkeyup的实用性。同时，深入讲解了DOM事件模型，包括事件捕获和冒泡阶段，并解释了如何阻止事件传播。此外，还提到了解构赋值法在事件处理中的应用。通过实例展示了如何利用事件对象e.keycode获取ASCII编码。文章最后探讨了早期事件模型和现代DOM事件模型的区别及其在实际开发中的影响。

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

键盘事件一般用于表单和全局哦

貌似以下的几个键盘事件的书写不是很规范，但是能用！
onkeyup
当键盘在某个HTML元素上弹起的时候触发，请优先使用onkeyup，因为它是最接近我们日常生活使用的，弹起触发嘛
onkeydown
当键盘在某个HTML元素上按下的时候触发
如果按下不放手会一直触发
onkeypress
键盘按下（只支持字母键）产生字符后才触发

键盘事件之输入框练习

在这个小栗子中，我调用了一个属性e.keycode 这是事件对象e自带的一个属性，它的作用是返回一个ASCII表的编码，ASCII（American Standard Code for Information Interchange）它定义了键盘上按键的号码。

事件模型

早期事件模型就是单独获取绑定元素节点，它是单个的也是独立的，后面发生的事件会覆盖前面的事件，删除方法是让事件绑定的函数变为空（null）

dom事件模型就是通过监听事件先进行捕获：随着文档的读取从上到下，从外而内的遍历节点，然后执行冒泡流程：从目标节点开始向上依次返回父节点，由内而外的遍历整个dom，通过上一次的内容我们了解了如何添加事件：节点名.addEventListener（'事件名'，函数）和如何解除绑定：节点名.removeEventListener（'事件名'，函数），在添加事件中，函数后面还可以加入一个布尔值，如果是true就是捕获流程，如果是false就是冒泡流程。

那知道这个有什么用呢？由于事件冒泡的关系，导致了我们获取信息的时候，我点了一个孙子辈的元素，结果把它爷爷都给带出来了，但是这并不是我想要的结果，我只想要孙子辈的值我不要你全都显示给我，由此我们就需要阻止事件传播：e.stopPropagation