JavaScript |活动

Javascript 有事件来为网页提供动态界面。这些事件与文档对象模型 (DOM) 中的元素挂钩。
这些事件默认使用冒泡传播，即在 DOM 中从子级向上传播到父级。我们可以将事件绑定为内联或外部脚本。
这些是一些 javascript 事件：
1) onclick 事件：这是一个鼠标事件，如果用户单击它所绑定的元素，则会触发任何定义的逻辑。
代码#1：

html

  
    
      function hiThere() {
        alert('Hi there!');
      }
    
  
  
    Click me event
  

输出：
在点击“click me event”之前——

单击“单击我事件”键后-

2）onkeyup事件：该事件是一个键盘事件，只要按下一个键就执行指令。
代码#2：

html

  
    
      var a = 0;
      var b = 0;
      var c = 0;
      function changeBackground() {
        var x = document.getElementById('bg');
        x.style.backgroundColor = 'rgb('+a+', '+b+', '+c+')';
        a += 1;
        b += a + 1;
        c += b + 1;
        if (a > 255) a = a - b;
        if (b > 255) b = a;
        if (c > 255) c = b;
      }
    
  
  
    
  

输出：
在写“gfg”之前——

在写完“gfg”之后——

3) onmouseover 事件：此事件对应于将鼠标指针悬停在它所绑定的元素及其子元素上。
代码#3：

html

  
    
       function hov() {
         var e = document.getElementById('hover');
         e.style.display = 'none';
      }
    
  
  
    
    
  

输出：
在鼠标被接管绿色方块之前-

绿色方块在鼠标被接管后消失。
4) onmouseout 事件：每当鼠标光标离开处理 mouseout 事件的元素时，就会执行与其关联的函数。
代码 #4：

html

  
    
      function out() {
        var e = document.getElementById('hover');
        e.style.display = 'none';
      }
    
  
  
    
    
  

输出：
在鼠标移到绿色方块上之前——

绿色方块会在鼠标被接管后消失，并在一段时间后移除。
5) onchange 事件：该事件检测到该事件列出的任何元素的值的变化。
代码#5：

输出：
在按下任何键之前——

按下2键后-

6) onload 事件：当一个元素被完全加载时，这个事件被触发。
代码 #6：

输出：

7) onfocus 事件：列出此事件的元素在收到焦点时执行指令。
代码 #7：

html

  
    
      function focused() {
        var e = document.getElementById('inp');
        if (confirm('Got it?')) {
          e.blur();
        }
      }
    
  
  
    Take the focus into the input box below:
 
 
    
  

输出：
在框内单击鼠标之前-

在框内单击鼠标后-

8) onblur 事件：当元素失去焦点时触发该事件。
代码#8：

html

  
  
     
 
Write something in the input box and then click elsewhere
       in the document body.
 
 
    
  

输出：
在框内输入“gfg”之前-

在框内输入“gfg”并按回车后-

PS： onmouseup事件监听鼠标左键和中键，而onmousedown事件监听鼠标左键、中键和右键，而onclick只处理鼠标左键。