ES6 |活动

ES6 事件是每个 HTML 元素的一部分，它包含一组可以触发 JavaScript 代码的事件。事件是软件识别的动作或事件。它可以由用户或系统触发。大多数事件用于按钮、超链接、悬停、页面加载等。所有这些东西都在事件处理程序的帮助下生效（处理）。

事件处理程序：简单地说，当提到的事件发生时，它会被处理。引发事件时，它以一组指令（函数（））的形式进行处理。

以下是一些最常用的 HTML 事件：

onclick：在单击鼠标左键的帮助下单击按钮时会激活此事件。通过单击，“onclick”调用分配给它的相应函数（） 。

• 例子：

   
   
      
          ES6 Events using onclick
      
        
       
          function geeks() { 
              document.write ("A Computer"
              + " Science Portal for Geeks") 
          } 
       
   
        
   
    
      
          GeeksforGeeks
      
        
       
          With a click, the “onclick”
          calls geeks()
      
        
       
   
    

• 输出：
  

onmouseover 和 onmouseout：这些事件类型将帮助我们为图像甚至文本创建漂亮的效果。当您将鼠标光标移到任何元素上时会触发“onmouseover”事件，而当您将鼠标光标移出该元素时会触发“onmouseout”事件。

• 例子：

    
  
      
          ES6 Events using onmouseover
          and onmouseout
      
        
      
          function mouseOver() {
              document.getElementById("d1").style.color
                              = "green";
                
              document.getElementById("d2").innerHTML
                              = "mouseOver triggered";
          }
    
          function mouseOut() {
              document.getElementById("d1").style.color
                              = "black";
                
              document.getElementById("d2").innerHTML
                              = "mouseOut triggered";
          }
      
  
    
  
        
      
          GeeksforGeeks
      
            
      
          when the cursor is on the element
          h1 the "onmouseover" gets triggers
          and when the cursor is out of h1
          the "onmouseout" gets triggers.
      
            
      
  
    

• 输出：
  

onmousedown、onmouseup、onmousewheel ：这些事件类型将帮助我们为图像甚至文本创建漂亮的效果。 “onmousedown”事件在您单击元素时触发，直到您松开它时触发“onmouseup”事件，“onmousewheel”事件在鼠标滚轮稍微旋转时触发。

• 例子：

    
  
        
      
          ES6 Events using onmousedown,
          onmouseup and onmousewheel
      
    
      
          function mouseDown() {
              document.getElementById("d1").style.color
                          = "blue";
                
              document.getElementById("d2").innerHTML
                          = "mouseDown triggered";
          }
    
          function mouseUp() {
              document.getElementById("d1").style.color
                          = "green";
                
              document.getElementById("d2").innerHTML
                          = "mouseUp triggered";
          }
    
          function mouseWheel() {
              document.getElementById("d1").style.color
                          = "violet";
                
              document.getElementById("d2").innerHTML
                          = "mouseWheel triggered";
          }
      
  
    
  
        
      
          GeeksforGeeks
      
        
      
          when the mouse pointer clicks on the element h1,
          the text color changes to 'blue' when released 
          changes to 'green', if the mouse wheel rotates color
          changes to 'violet'.
      
        
      
        
      
  
    

  输出：
  

onsubmit：这是在您尝试在将表单提交到下一个操作（服务器）之前验证表单时发生的事件。您可以针对此事件类型进行表单验证。通过单击，“onsubmit”调用分配给它的相应“return 函数()”，并以 true 或 false 的形式从函数() 中获取响应并决定操作。看看这个页面 ES6 |验证关于“onsubmit”的基本和详细示例。

查看下表，了解一些最常用的事件处理程序：

Attribute	Description
onchange	Gets trigger when an element changes
onfocus	Gets trigger when the window gets focus
oninput	Gets trigger when an element gets user input
onformchange	Gets trigger when a form changes
onkeypress	Gets trigger when a keyword key is pressed and released
onkeydown	Gets trigger when a key is pressed
onkeyup	Gets trigger when a key is released
onmousemove	Gets trigger when the mouse pointer moves
onpause	Gets trigger when the media data is paused
onscroll	Gets trigger when an element’s scrollbar is being scrolled
onselect	Gets trigger when an element is selected
onwaiting	Gets trigger when the media has stopped playing, but is expected to resume
onpause	Gets trigger when the media data is paused
onplay	Gets trigger when the media data is going to start playing
onplaying	Gets trigger when the media data has start playing