JavaScript--键盘鼠标事件

本文主讲:JS中常用事件、JS中回调函数、JS 中代码因执行顺序报错的两种解决办法、获取页面标签(组件)的属性并修改、JS 中事件执行后怎么获取事件对象、JS 代码捕获键盘按下指定键子事件、JS 代码执行指定事件等

JS 中常用的事件

JS 中常用的几种事件【知道事件名称和功能】

blur:网页内容失去焦点【光标移动到了其他地方】发生的事件
focus:网页内容获取焦点【光标移动到了自己这里】发生的事件

keydown:键盘按下发生的事件
keyup:键盘键子 弹起发生的事件

click:鼠标单击发生的事件
dblclick:鼠标双击发生的事件

mousedown:鼠标按下发生的事件
mouseup:鼠标弹起发生的事件
mouseover:鼠标经过发生的事件
mousemove:鼠标移动发生的事件
mouseout:鼠标离开发生的事件

reset:重置表单发生的事件
submit:提交表单发生的事件

change:下拉列表框内的选项产生变化发生的事件

select:文本被选中发生的事件

load:整个网页的全部组件元素加载完毕发生的事件【非常重要】

image-20211007110746635

注意:
1:任何事件都有其对应的事件句柄,就是在事件前面加上一个 on ,例如onclick、onkeydown

2:事件句柄以属性的形式存放在 HTML 标签内!

例如

1
<input type="button" value="hello" onclick="JS 代码"/>  

里面的 onclick 属性就是鼠标单击的事件句柄!

JS 中注册事件【事件存在】的两种方式

第一种方式:把事件以事件句柄的方式注册到HTML标签组件的属性之中,当在这个标签组件上发生了该事件,事件句柄后的JS代码被执行

image-20211007110801213

第二种方式:通过纯 JS 代码实现注册事件

第一步:在脚本块外创建某一个标签组件

第二步:创建需要回调的函数

第三步:获取这个结点对象

第四步:为这个结点对象的指定事件句柄添加回调函数【函数不能加括号】

image-20211007110816282

注意:

1:document与window类似,都是JS内置的对象,document代表当前页面内的源代码,window代表当前页面的窗口!

2:为标签组件对象的指定属性赋值【回调函数】时,回调函数不能加括号!

最常用方式:通过对第二种方式的合并加上匿名函数实现注册事件

image-20211007110830488

注意:通过事件句柄注册的回调函数,浏览器打开这个函数并不会执行,只有在指定组件上发生了指定事件,回调函数才会执行

JS 中的回调函数

概念:JS 中的回调函数就是开发者写好一个函数,但自己不去主动调用它,等待其他用户【程序】的主动调用

image-20211007112948933

ps:浏览器打开注册到按钮上的回调函数并不会执行,当这个按钮被点击之后,那个回调函数才会执行!

JS 中代码因执行顺序报错的两种解决办法

JS 中注册事件后因为 JS 代码执行顺序程序报错的现象

image-20211007113014715

JS 中解决注册事件后因为 JS 代码执行顺序程序报错的两种方式

第一种方式:在 body 标签内添加属性名为onload,属性值为回调函数的属性

ps:load事件是当页面内全部组件数据加载完毕才会被触发执行的事件

image-20211007113047068

第二种方式【最常用】:通过 window.onload 方式解决

注意:其实第二种和第一种解决问题的方式原理是一样的!

获取页面标签(组件)的属性并修改

JS 代码怎么获取页面内的组件【标签】的属性并且修改这个属性值

第一步:通过 JS 代码获取组件标签对象

第二步:获取组件标签对象内的属性并且修改属性值

image-20211007113118268

注意:一个HTML组件标签,只要是有的属性,我们都可以对它进行获取并且修改赋值等等!【只要是属性存在,代码写没写出来都可更改】

image-20211007113132224

JS 中如何在事件执行后获取这个事件对象

答:通过匿名回调函数获取,回调函数括号内可以用形参的方式来接收发生事件的对象,不管回调函数是都用形参来接收这个事件对象,这个事件对象都会传给匿名回调函数,问题就是你是否想通过这个事件对象来获取其他有关于这个事件的数据

image-20211007113145168

如何用 JS 代码获取键盘按下后程序判断按下的是什么键子!

答:通过回调函数接收键盘按下的事件对象,在通过这个事件对象的keyCode属性即可获取按下键子的键值从而判断按下的是什么键子

ps:Enter的键值为13,Esc键子的键值为27,通过键值可以判断键盘按下的是什么键子

程序获取键子键值的方式:键值 = 键盘按下对象.keyCode 【键盘按下是一个事件,可通过结点的回调函数获取】

image-20211007113213155

JS 中如何利用代码执行指定事件

实现语法:事件绑定的组件对象.事件名()

功能:不用通过人工进行事件的实现,程序模拟实现!

语法示例:btuObj.click() 【在 btuObj 这个按钮上面程序执行鼠标单击事件】

图示:

image-20211007113227652

持续更新中……