ES6 事件
ES6 事件
JavaScript 与 HTML 是通过浏览器或用户操作页面时发生的事件来处理的。事件是软件识别的事件或动作。系统或用户可以触发它们。
事件可以被表述为 DOM(文档对象模型)级别 3 的一部分。它们在网页上发生某种交互时发生。每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。一些常见的事件示例包括单击按钮、单击超链接、加载网页等。
事件处理程序
要对事件做出反应,您可以分配一个处理程序(在发生事件时运行的函数)。事件处理程序可以定义为在发生事件时执行的代码块一个事件。我们可以通过使用事件处理程序在 JavaScript 中定义事件的处理。
让我们尝试了解 HTML.
onclick 事件类型
这是最常用的事件类型之一,当用户点击时被激活在一个按钮上。在这种事件类型中,我们可以放置警告、验证等。通过单击,'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 = "Click me " />
</body>
</html>
当你在浏览器中执行上述代码时,你会得到如下输出。
输出
点击按钮后会有提示,如下图
onsubmit 事件类型
当您需要提交表单时发生。当您单击提交按钮时,'onsubmit' 调用相应的 'return function()' 并从 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 |
它在 abort 事件上触发。 |
offline |
文档离线时触发。 |
onafterprint |
在打印文档后触发。 |
onbeforeonload |
在加载文档之前触发。 |
onbeforeprint |
在打印文档之前触发。 |
onblur |
当窗口失去焦点时触发。 |
onchange |
当元素改变时触发。 |
onclick |
鼠标点击时触发。 |
oncontextmenu |
当上下文菜单被触发时触发。 |
oncanplay |
当媒体可以开始播放时触发。 |
oncanplaythrough |
当媒体播放到最后没有任何缓冲或停止时触发。 |
ondbclick |
双击鼠标触发。 |
ondrag |
拖动元素时触发。 |
ondrop |
当拖动的元素被放下时触发。 |
ondragend |
拖动操作结束时触发。 |
ondragenter |
当元素被拖动到放置目标时触发。 |
ondragleave |
当元素离开放置目标时触发。 |
ondragover |
当元素被拖放到放置目标上时触发。 |
ondragstart |
它在拖动操作开始时触发。 |
ondurationchange |
当媒体长度改变时触发。 |
onended |
当媒体到达结尾时触发。 |
omemptied |
当媒体中的资源元素突然变空时触发。 |
onfocus |
当窗口获得焦点时触发。 |
onerror |
发生错误时触发。 |
onformchange |
当表单发生变化时触发。 |
onforminput |
当表单获得用户输入时触发。 |
onhaschange |
它在更改文档时触发。 |
oninput |
当元素获得用户输入时触发。 |
oninvalid |
它在无效元素上触发。 |
onkeyup |
释放按键时触发。 |
onkeydown |
当按键被按下时触发。 |
onkeypress |
当按键被释放和按下时触发。 |
onload |
它在加载文档时触发。 |
onloadedmetadata |
当媒体数据和媒体元素的持续时间被加载时触发。 |
onloadeddata |
加载媒体数据时触发。 |
onmessage |
它在消息触发时触发。 |
onloadstart |
当浏览器开始加载媒体数据时触发。 |
onmousemove |
它在鼠标指针移动时触发。 |
onmousedown |
它在按下鼠标按钮时触发。 |
onmouseover |
当您将鼠标指针移到元素上时触发。 |
onmouseout |
当鼠标指针移出元素时触发。 |
onmouseup |
释放鼠标按钮时触发。 |
onmousewheel |
当你转动鼠标滚轮时触发。 |
ononline |
文档在线时触发。 |
onoffline |
文档离线时触发。 |
onpageshow |
当窗口可见时触发。 |
onpagehide |
当窗口隐藏时触发。 |
onplay |
当媒体数据开始播放时触发。 |
onplaying |
播放媒体数据时触发。 |
onpause |
当媒体数据暂停时触发。 |
onprogress |
当浏览器获取媒体数据时触发。 |
onpopstate |
当窗口历史改变时触发。 |
onratechange |
当媒体数据的播放速率改变时触发。 |
onreadystatechange |
当就绪状态改变时触发。 |
onredo |
当文档正在执行重做操作时触发。 |
onresize |
当窗口调整大小时触发。 |
onscroll |
当元素的滚动条滚动时触发。 |
onseeking |
当media元素的seek属性为true时触发,并且已经开始搜索。 |
onseeked |
media 元素的seek 属性不为true 时触发,并且seek 已经结束。 |
onselect |
当元素被选中时触发。 |
onstalled |
在获取媒体数据出错时触发。 |
onsubmit |
提交表单时触发。 |
onstorage |
它在文档加载时触发。 |
onvolumechange |
当媒体元素改变其音量或音量静音时触发。 |
onwaiting |
当媒体元素停止播放时触发,但预计会继续播放。 |
onunload |
当用户离开文档时触发。 |
onundo |
当文档执行撤销操作时触发。 |
ontimeupdate |
当媒体元素的播放位置改变时触发。 |
onsuspend |
当浏览器正在获取媒体数据但在获取完整媒体文件之前停止时触发。 |