HTML | DOM addEventListener() 方法

addEventListener()方法将事件处理程序附加到指定的元素。

句法：

element.addEventListener(event, function, useCapture)

注意：第三个参数 use capture 通常设置为 false，因为它没有被使用。

下面的程序说明了 DOM addEventListener()：

例子：

  

    DOM Location host Property
    
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
    addEventListener() method
  
    
     This example uses the addEventListener() 
     method to add many events on the same 
     button.
    
  
    Try it
  
    
  
    
        var x = document.getElementById("myBtn");
        x.addEventListener("mouseover", myFunction);
        x.addEventListener("click", mySecondFunction);
        x.addEventListener("mouseout", myThirdFunction);
  
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over!<br>"
            this.style.backgroundColor = "red"
        }
  
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked!<br>"
        }
  
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out!<br>"
        }
    
  

  
                    

输出：

• 最初：
  
• 鼠标悬停事件：
  
• 鼠标点击事件：
  
• 鼠标退出事件：
  

支持的浏览器： Location主机属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器