ES6教程

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>
当你在浏览器中执行上述代码时,你会得到如下输出。
输出
ES6 Events
点击按钮后会有提示,如下图
ES6 Events

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 Events
将鼠标移到第一个标题上,您将得到:
ES6 Events
将鼠标从第一个标题移出,您将得到:
ES6 Events

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 当浏览器正在获取媒体数据但在获取完整媒体文件之前停止时触发。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4