JavaScript 中 addEventListener 和 onclick 的区别

addEventListener()和onclick都监听一个事件。两者都可以在单击按钮时执行回调函数。但是，它们并不相同。在本文中，我们将了解它们之间的区别。

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

句法：

element.addEventListener(event, listener, useCapture);

参数：

• 事件：事件可以是任何有效的 JavaScript 事件。事件在没有“on”前缀的情况下使用，例如使用“click”而不是“onclick”或“mousedown”而不是“onmousedown”。
• listener(handler 函数)：它可以是响应发生的事件的 JavaScript函数。
• useCapture：（可选参数）一个布尔值，指定事件是在捕获阶段还是在冒泡阶段执行。

注意： addEventListener() 方法可以将多个事件处理程序应用于同一元素。它不会覆盖其他事件处理程序。

示例：下面是一段 JavaScript 代码，显示多个事件与一个元素相关联并且没有覆盖。

HTML

  

    Click here
    
    
  
    
        let btn_element = document.getElementById("btn");
  
        btn_element.addEventListener("click", () => {
            document.getElementById("text1")
                .innerHTML = "Task 1 is performed";
        })
  
        btn_element.addEventListener("click", () => {
            document.getElementById("text2")
                .innerHTML = "Task 2 is performed";
        });
    

  

输出：

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

句法：

在 HTML 中：

在 JavaScript 中：

object.onclick = function(){myScript};

onclick只是一个属性。像所有对象属性一样，如果我们写入多个属性，它将被覆盖。

示例：下面是一个 JavaScript 代码，用于显示多个事件不能与一个元素关联，因为存在覆盖

HTML

  

    Click here
    
    
  
    
        let btn_element = document.getElementById("btn");
  
        btn_element.onclick = () => {
            document.getElementById("text1")
                .innerHTML = "Task 1 is performed";
        };
  
        btn_element.onclick = () => {
            document.getElementById("text2")
                .innerHTML = "Task 2 is performed";
        };
    

  

输出：

addEventListener 和 onclick 的区别：

addEventListener	onclick
addEventListener can add multiple events to a particular element.	onclick can add only a single event to an element. It is basically a property, so gets overwritten.
addEventListener can take a third argument that can control the event propagation.	Event propagation cannot be controlled by onclick.
addEventListener can only be added within