JavaScript中的Event(事件)详解

Java (4) 2024-04-24 17:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说JavaScript中的Event(事件)详解,希望能够帮助你!!!。

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一些常用属性,可将之插入 HTML 标签以定义事件的行为。

1、单击事件
JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第1张
2、双击事件
JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第2张
3、鼠标事件

onmouseover:鼠标放上事件
onmouseout:鼠标离开事件
onmousemove:鼠标移动事件

JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第3张

4、键盘事件

onkeydown:键盘按下事件
onkeyup:键盘弹起事件

JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第4张

5、焦点事件

onfocus:获得焦点事件
onblur:失去焦点事件
onchange:失去焦点时内容改变事件

JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第5张

6、页面加载事件

onload:页面加载完成时实现的页面。

JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第6张

注:调用多个函数时,只需要用分号隔开即可。如下图:同时触发两种事件
JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第7张

相关事件所对应的函数代码:
JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第8张

附:事件名称表
JavaScript中的Event(事件)详解_https://bianchenghao6.com/blog_Java_第9张

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复