JavaScript 什么是添加事件的最佳方法

JavaScript具有提供动态界面的事件。这些事件被挂钩到文档对象模型（DOM）中的元素上。

有三种方法可以分配事件处理程序：

HTML事件处理程序属性
HTML DOM属性
HTML DOM addEventListener()方法

在JavaScript脚本中添加事件的最佳方法是 addEventListener() 。让我们通过一些示例来理解。

示例1

此示例中，我们将使用事件处理程序属性添加一个事件。

语法：

<element onclick = "script">

onclick事件属性在用户点击按钮时触发。当鼠标点击元素时，脚本会运行。

<!doctype html> 
<html> 
  
<head> 
    <script> 
        function Geeks() { 
            alert('Hi there!'); 
        } 
    </script> 
</head> 
  
<body> 
    <button type="button" 
        onclick="Geeks()"> 
        Click me event 
    </button> 
</body> 
  
</html>

输出：

<!doctype html> 
<html> 
  
<head> 
    <script> 
        function Geeks() { 
            alert('Hi there!'); 
        } 
    </script> 
</head> 
  
<body> 
    <button type="button" 
            onclick="Geeks()"> 
        Click me event 
    </button> 
</body> 
  
</html>

缺点：

使用HTML事件处理程序属性来分配事件处理程序被认为是一种不好的做法。
事件处理程序代码与HTML代码混合在一起，这将使代码更难以维护和扩展。
存在一个时机的问题，如果元素在JavaScript代码之前完全加载，用户可以开始与网页上的元素进行交互，这将导致错误。

示例2

在这个示例中，我们将使用HTML DOM属性添加一个事件。

语法：

element.onclick = function() {}

<!doctype html> 
<html> 
  
<body> 
    <button id="button">Click me event</button> 
    <script> 
        let btn = document.getElementById("button"); 
  
        btn.onclick = function() { 
            alert('Hi there'); 
        }; 
    </script> 
</body> 
  
</html>

输出：

JavaScript 什么是添加事件的最佳方法

缺点： 无法为特定事件分配多个事件处理程序。

示例3

在此示例中，我们将使用addEventListener()方法添加一个事件。addEventListener()方法接受要监听的事件，和一个第二个参数，在所描述的事件被触发时调用。可以为单个元素添加任意数量的事件处理程序，而不会覆盖现有的事件处理程序。

语法：

element.addEventListener(event, listener);

<!doctype html> 
<html> 
  
<body> 
    <button id="button">Click me event</button> 
  
    <script> 
        let btn = document.getElementById("button"); 
  
        btn.addEventListener('click', function() { 
            alert('Hi there'); 
        }); 
  
        btn.addEventListener('click', function() { 
            alert('Welcome To GeeksforGeeks'); 
        }); 
    </script> 
</body> 
  
</html>

输出:

JavaScript 什么是添加事件的最佳方法