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>

当你在浏览器中执行上述代码时，你会得到如下输出。

输出

ES6 事件_https://bianchenghao6.com_【ES6 教程】_第1张

点击按钮后会有提示，如下图

ES6 事件_https://bianchenghao6.com_【ES6 教程】_第2张

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>

当你在浏览器中执行上述代码时，你会得到如下输出。

输出

ES6 事件_https://bianchenghao6.com_【ES6 教程】_第3张

将鼠标移到第一个标题上，您将得到:

ES6 事件_https://bianchenghao6.com_【ES6 教程】_第4张

将鼠标从第一个标题移出，您将得到:

ES6 事件_https://bianchenghao6.com_【ES6 教程】_第5张

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	当浏览器正在获取媒体数据但在获取完整媒体文件之前停止时触发。

ES6 VS ES5

ES6 函数