键盘事件和BOM

于 2021-11-23 16:57:11 发布
阅读量491 收藏
点赞数
分类专栏： CSS3 HTML5 JS 文章标签： html5 css3 javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lucky1019/article/details/121497406
版权
这篇博客详细介绍了JavaScript中的键盘事件，包括keydown、keyup和keypress，强调了它们的区别和使用场景。同时，深入讲解了BOM（浏览器对象模型），包括window对象的常见事件，如页面加载和窗口大小调整，以及location、navigator和history对象的特性。此外，还探讨了JavaScript的执行机制，如单线程、同步任务和异步任务，以及事件循环的概念。
摘要由CSDN通过智能技术生成

常用键盘事件

键盘事件 触发条件
onkeyup 某个按键松开时触发
onkeydown 某个按键按下时触发
onkeypress 某个按键按下时触发 不能识别功能键比如 ctrl shift

如果使用 addEventListener不需要加on

onkeypress和前两个的区别是，不识别功能键

三个事件的执行顺序时：keydown – keypress-- keyup

键盘事件对象

键盘事件对象属性 说明
keyCode 返回该键的ASCII值

注意：

  1. onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分大小写
  2. 在我们实际开发中，我们更多使用keydown和keyup
  3. keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互 的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。

op4zyd.png

BOM的构成

BOM比DOM大，包含DOM

op5kY8.png

顶级对象window

window对象是浏览器的顶级对象，他具有双重角色

  1. 他是js访问浏览器窗口的一个接口。
  2. 他是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的
最低0.47元/天 解锁文章
扶苏怎么会服输
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js的重点5:键盘事件对象、 BOM的构成、window对象的常见事件、定时器（两种）、this指向问题、location对象、navigator对象、 history对象
小黄呀呀呀的博客
09-27 119
一、键盘事件 onkeyup 弹起时触发 onkeydown 按下时触发，识别功能键 onkeypress 按下时触发，不识别功能键 二、BOM window是顶级对象 window下面有document、location、navigation、screen、history 三、window对象的常见事件 (1)窗口加载事件 onload
键盘事件&BOM
ZJie0的博客
02-04 660
键盘事件 常用的三个 onkeyup：当某个按键被松开的时候后触发 onkeydown：当某个按键被按下的时候触发 onkeypress：当某个按键被按下的时候触发，不识别功能按钮(方向键、shift) 注意： 如果使用addEventListener不需要加on onkeypress和前面的两个事件区别在于它不识别功能键 三个时间的触发顺序是：keydown–keypress–keyup <script> // 常用的键盘事件 //1.
JS Web APIs-day04 键盘事件、BOM、定时器、JS执行机制
weixin_45734686的博客
10-25 276
JS Web APIs-day04 引文 BOM Browser Object Model 浏览器对象模型。用来操作浏览器。 window对象：浏览器中最大的一个对象（顶级对象） 所有的全局变量和函数都是window对象的属性和方法。 window对象可以省略。 回调函数 回调函数：我们编写的，但是我们不进行调用，当满足某个条件时，由系统调用的函数就成为回调函数。 btn.oncli...
BOM、鼠标事件、键盘事件
weixin_44680509的博客
05-23 295
BOM 浏览器嗅探：navigator.userAgent() 封装函数是否是移动端 function isPhone(){ var is=false; var arr=['iOS','iPhone','iPad','Andriod']; for(var i=0;i<arr.length;i++){ if(navigator.userAgent().indexOf(arr[i])!=-1){ is=true;//移动端 } else{ is=false; } } return is; } 鼠标
BOM操作
qq_45142260的博客
12-10 346
BOM browser object model，简称BOM， 是浏览器对象模型 1.bom提供了与浏览器窗口交互的对象 2.由于bom主要用于管理窗口与窗口之间的通信，因此他的主要研究对象是window 3.ECMAScript没有规范bom的标准，因此所有的特性都是浏览器自己的特性，bom对象的方法浏览器都支持，只是略有不同 bom的子对象 1.document 文档对象 2.localtio...
NXP LPC51U68 的有线机械键盘BOM-综合文档
05-14
NXP LPC51U68 的有线机械键盘BOM
NXP LPC51U68 的有线机械键盘BOM.xlsx-综合文档
05-24
NXP LPC51U68 的有线机械键盘BOM.xlsx
基于STM32的RGB灯蓝牙键盘原理图、PCB及BOM料表
01-18
BOM（Bill of Materials）料表是项目所需的所有硬件组件清单，包括每个组件的型号、数量和供应商信息。这对于采购和生产阶段至关重要，确保所有元件都能正确无误地装配到产品上。 综上所述，这个项目涵盖了微控制器...
DOM
LIJIWEI0611的博客
09-11 262
1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) ​ //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl sh...
网页: onkeypress事件与onkeydown事件的区别
酷伊奥
07-19 3390
一、了解区别 1、onkeypress事件：用户在按下并放开键盘上的按钮时所触发的事件，但是键盘上的功能区按钮是无法识别的（例如：F1-F12，箭头，Delete 等等）。 2、onkeydown事件：用户在按下键盘上的按钮时所触发的事件，包括键盘上的功能区按钮（例如：F1-F12，箭头，Delete 等等）。 二、具体的区别 1、onkeypress事件是用户在按下并放开键盘上的按钮时触发，而onkeydown事件是用户在按下但没有放开键盘上的按钮时触发。 2、onkeypress无法识别功能..
浅析OnKeyPress事件和OnKeyDownOnKeyUp事件
10-19
浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
onKeypress 与onKeyDown 事件在键盘中所代表数值的差异
我是星星的博客
09-10 1013
onKeydown();键盘按下时触发 onKeyup();键盘抬起时触发 ononKeypress();键盘按下后抬起才会触发，我理解为上面两个事假的集合 今天在做个项目时，发现onKeydown()和ononKeypress()之间一点细微的差别 document.onkeydown=function(e){ e=e||window.event; console.l...
浅析OnKeyPress事件和OnKeyDown/OnKeyUp事件
yp120yp的专栏
03-03 1087
OnKeyPress事件<br />    OnKeyPress事件是在用户按下键盘上任何一个可打印的字符时发生，只有能接收键盘输入的组件才有OnKeyPress事件。我们常常利用OnKeyPress事件截取在编辑框和组合框组件中所输入的击键，还可以立即测试击键的有效性或在字符输入时对其进行一定的格式处理。<br />    例如，在TEdit组件上捕获OnKeyPress事件，判断输入的是否是小写字母，如果是，将其转换为大写字母，代码如下：<br />    void __fastcall TForm1:
onkeypress 和 onkeydown 的区别
u011574239的专栏
05-06 1228
 1. 一个放开一个没有放开，onkeydown 先于 onkeypress 发生。  2.onkeypress 无法系统按钮。  2.onkeydown 捕获的 keyCode 不区分字母大小，而 onkeypress 区分。  onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。  onkeyup 是在用户放开任何先前按下
onkeypress与onkeydown 事件区别详细说明
Aybuai的博客
07-30 760
onkeypress 和 onkeydown 是有区别，下面将讲解 onkeypress 与 onkeydown 事件的区别。 onkeypress 事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。 onkeydown 事件在用户按下任何键盘键（包括系统按钮）时发生。 具体区别： 1、 一个放开一个没有放开，onkeydown 先于 onkeypress 发生。 2、onkeypress 无法系统按钮。 3、onkeydown 捕获的 keyCode 不区分字.
浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
javaqun的博客
10-19 2325
OnKeyPress事件     OnKeyPress事件是在用户按下键盘上任何一个可打印的字符时发生，只有能接收键盘输入的组件才有OnKeyPress事件。我们常常利用OnKeyPress事件截取在编辑框和组合框组件中所输入的击键，还可以立即测试击键的有效性或在字符输入时对其进行一定的格式处理。     例如，在TEdit组件上捕获OnKeyPress事件，判断输入的是否是小
onkeyup，onkeydown和onkeypress区别
whazhl的专栏
03-04 4644
 一、含义 onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。   onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。   onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。    二、onkeyup，onkeydown和onkeypress
onkeyup，onkeydown和onkeypress
热门推荐
linhonglong的专栏
03-07 1万+
如下一段代码：   function checkForm(){   if(event.keyCode ==13){     event.keyCode =9;   }  }       onkeydown = "checkForm()">      当按下回车时，焦点从文本框移到按钮上。如果把它换成“onkeypress”，焦点不会转移，也不会失去。但是如果换成“onkeyup”，则失去焦
onkeyup 事件运用（实例）
小码的博客
11-19 3116
onkeyup 事件 定义和用法 onkeyup 事件会在键盘按键被松开时发生。 提示：与onkeyup 事件相关的事件发生次序： onkeydown //键盘按键按下 onkeypress //键盘按键压着 onkeyup //键盘按键松开 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>快乐学习</title> <script> fun
javascript使用以下知识点进行网页设计和js特效并写出代码1、 常用鼠标与键盘事件 2、 事件对象的绑定与使用 3、 排他操作 4、 Bom获取窗体属性 5、 Bom相关属性的使用 6、 Bom相关方法的使用 7、 Offset的使用 8、
最新发布
06-03
1. 常用鼠标与键盘事件： ```javascript // 鼠标事件 element.addEventListener('click', function(event) { // 点击事件 }); element.addEventListener('mousedown', function(event) { // 按下鼠标键事件 }); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

扶苏怎么会服输

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值