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

Javascript 具有为网页提供动态界面的事件。这些事件与文档对象模型 (DOM) 中的元素挂钩。

可以通过三种方式分配事件处理程序：

1. HTML 事件处理程序属性
2. HTML DOM 属性
3. HTML DOM addEventListener() 方法

在 JavaScript 脚本中添加事件的最佳方法是addEventListener() 。让我们深入研究几个例子来理解。

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

句法：

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

HTML

 

    
        function Geeks() {
            alert('Hi there!');
        }
    

 

    
        Click me event
    

 

输出：

点击按钮前：

点击按钮后：

坏处：

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

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

句法：

element.onclick = function() {}

HTML

 

    Click me event
    
        let btn = document.getElementById("button");
 
        btn.onclick = function() {
            alert('Hi there');
        };
    

 

输出：

点击按钮前：

点击按钮后：

缺点：我们不能为特定事件分配多个事件处理程序。

示例 3：在本示例中，我们将使用 addEventListener() 方法添加一个事件。 addEventListener()方法接受要侦听的事件，以及在描述的事件被触发时要调用的第二个参数。可以将任意数量的事件处理程序添加到单个元素，而无需覆盖现有的事件处理程序。

句法：

element.addEventListener(event, listener);

HTML

 

    Click me event
 
    
        let btn = document.getElementById("button");
 
        btn.addEventListener('click', function() {
            alert('Hi there');
        });
 
        btn.addEventListener('click', function() {
            alert('Welcome To GeeksforGeeks');
        });
    

 

输出：

优点：我们可以为特定事件分配多个事件处理程序。

结论：现在您可以得出结论， addEventListener() 是在 JavaScript 脚本中添加事件的最佳方式，因为它是针对特定事件的多事件处理程序。