ES6事件介绍和用法示例 _ES6事件

本文概述

事件处理程序
事件类型
提交事件类型
onmouseout和onmouseover
HTML5标准事件

【ES6事件介绍和用法示例】JavaScript与HTML的交互是通过浏览器或用户操纵页面时发生的事件来处理的。事件是软件识别的事件或动作。系统或用户可以触发它们。
可以将事件声明为DOM(文档对象模型)级别3的一部分。事件发生在网页上进行某种类型的交互时。每个HTML元素都包含可以触发JavaScript代码的事件集合。事件的一些常见示例包括单击按钮, 单击超链接, 加载网页等。
事件处理程序要对事件做出反应, 你可以分配一个处理程序(一个在事件发生时运行的函数)。可以将事件处理程序定义为在事件发生时执行的代码块。我们可以使用事件处理程序来定义JavaScript中事件的处理。
让我们尝试了解最常用的HTML事件。
事件类型它是用户单击按钮时激活的最常用的事件类型之一。在这种事件类型中, 我们可以发出警告, 验证等。单击时, ” onclick” 会调用分配给它的相应function()。
让我们通过一个例子来理解它。
例子

< html> < head> < script type = "text/javascript"> function hello() {alert ("Hello World"); }< /script> < /head> < body style="text-align:center; "> < p> Click the button< /p> < input type = "button" onclick = "hello()" value = "http://www.srcmini.com/Click me" /> < /body> < /html>

在浏览器中执行上述代码时, 将获得以下输出。
输出如下

文章图片
单击按钮后, 你将收到警报, 如下所示。

文章图片
提交事件类型当你需要提交表格时会发生这种情况。当你单击提交按钮时, ” onsubmit” 将调用相应的” return function()” , 并以true或false接收来自function()的响应。如果function()返回true, 则将提交表单。否则, 它将不会提交数据。
onmouseout和onmouseover 这些事件可帮助你使用文本和图像创建效果。顾名思义, 将鼠标悬停在任何元素上时会触发onmouseover事件。将鼠标移出元素时, 会触发onmouseout事件。
让我们尝试通过使用以下示例来理解它们。
例子

< html> < head> < script type="text/javascript"> function mouseOver() { document.getElementById("div1").style.color = "blue"; document.getElementById("div2").innerHTML = "mouseOver triggered"; document.getElementById("div2").style.color = "green"; } function mouseOut() { document.getElementById("div1").style.color = "magenta"; document.getElementById("div2").innerHTML = "mouseOut triggered"; document.getElementById("div2").style.color = "red"; } < /script> < /head> < body style="text-align:center; "> < h1 id="div1" onmouseover="mouseOver()"onmouseout="mouseOut()"> Bring your mouse inside it. < /h1> < h3> Move your cursor on the above heading to see the result.< /h3> < h2> < p id="div2"> < /p> < /h2> < /body> < /html>

在浏览器中执行上述代码时, 将获得以下输出。
输出如下

文章图片
将鼠标移到第一个标题上, 你将获得：

文章图片
将鼠标从第一个标题移出, 你将获得：

文章图片
HTML5标准事件下表列出了一些常用的HTML事件。

属性	描述
Onabort	它在中止事件上触发。
离线	当文档脱机时, 它将触发。
印后	在文档打印后触发。
onbeforeonload	它在加载文档之前触发。
印前	它在打印文档之前触发。
Onblur	当窗口失去焦点时触发。
不断变化	元素更改时触发。
点击	单击鼠标时触发。
上下文菜单	当上下文菜单被触发时触发。
oncanplay	当媒体可以开始播放时触发。
oncanplaythrough	当媒体播放到最后而没有任何缓冲或停止时, 它将触发。
ondbclick	双击鼠标即可触发。
拖曳	拖动元素时触发。
落下	当拖放元素时触发。
昂德拉贡	拖动操作结束时触发。
激进者	当元素拖动到放置目标时触发。
德拉格里夫	当元素离开放置目标时触发。
Ondragover	当将元素拖动到放置目标上时触发。
ondragstart	它在拖动操作开始时触发。
持续变化	更改介质长度时触发。
在	当媒体到达终点时触发。
无所不能	当媒体中的资源元素突然变空时触发。
专注	当窗口获得焦点时触发。
错误	它在发生错误时触发。
形式变更	表单更改时触发。
onforminput	当表单从用户获取输入时触发。
变迁	它触发文档的更改。
oninput	当元素从用户获得输入时触发。
无效	它在无效元素上触发。
按键	释放钥匙时触发。
按键	按下键时触发。
按键	释放并按下键时触发。
负载	它在文档加载时触发。
加载的元数据	加载媒体元素的媒体数据和持续时间时触发。
加载的数据	加载媒体数据时触发。
消息	它在消息触发时触发。
onloadstart	当浏览器开始加载媒体数据时触发。
情绪激动	它在鼠标指针移动时触发。
鼠标停下	在按下鼠标按钮时触发。
鼠标悬停	当你将鼠标指针移到某个元素上时触发。
的onmouseout	当鼠标指针从元素移出时触发。
鼠标悬停	释放鼠标按钮时触发。
onmousewheel	旋转鼠标滚轮时触发。
在线上	当文档在线时触发。
离线	当文档离线时触发。
页面显示	当窗口可见时触发。
页面隐藏	窗口隐藏时触发。
进行中	当媒体数据开始播放时触发。
正在播放	在播放媒体数据时触发。
暂停	媒体数据暂停时触发。
进行中	当浏览器获取媒体数据时触发。
onpopstate	窗口历史记录更改时触发。
利率变化	当媒体数据的播放速率改变时触发。
就绪状态变更	当就绪状态更改时, 它将触发。
Onredo	当文档正在执行重做操作时, 它将触发。
onResize受到	当窗口调整大小时触发。
滚动	当元素的滚动条滚动时触发。
寻求	当media元素的seek属性为true且开始搜索时触发。
寻求	当媒体元素的搜索属性不为真且搜索结束时触发。
取消选择	当元素被选中时触发。
已安装	媒体数据的获取错误时触发。
提交	表单提交时触发。
储存	当文档加载时触发。
音量变化	当媒体元素更改其音量或音量处于静音状态时, 它将触发。
等待中	当媒体元素停止播放但预期会恢复播放时触发。
onunload	当用户离开文档时触发。
onundo	当文档执行撤消操作时触发。
ontimeupdate	当媒体元素的播放位置改变时触发。
暂停	它在浏览器获取媒体数据但在获取完整的媒体文件之前停止时触发。