[JavaScript] 클릭이벤트 onclick과 addEventListenr 차이점

클릭이벤트 onclick과 Click Event 차이점

• onclick과 addEventListenr는 덮어쓰기 vs 누적의 차이입니다.
• onclick 은 하나의 요소에 클릭 이벤트를 걸어줄 때마다 기존에 등록되었던 클릭 이벤트가 덮어씌어집니다.
• addEventListenr 는 하나의 요소에 여러개의 핸들러를 등록할 수 있으며 HTML element 뿐만 아니라 모든 DOM element에 대해 동작합니다.

---

예시

<button>click</button>

 

1. onclick 이벤트

window.onload = function () {
    const btn = document.querySelector("button");

    btn.onclick = () => {
      console.log("reulst1");
    };

    btn.onclick = () => {
      console.log("reulst2");
    };

    btn.onclick = () => {
      console.log("reulst3");
    };
}

 

결과

Click 버튼을 누르면 마지막으로 호출한 result3만 출력되고 전에 호출된 result1, result2는 출력되지 않습니다.
onClick은 이벤트가 여러개 적용되지 못하고 새로운 이벤트가 추가되면 기존의 이벤트를 덮어씌우며 마지막에 등록된 이벤트만 작동됩니다.

 

2. addEventListenr 이벤트

window.onload = function () {
    const btn = document.querySelector("button");

    btn.addEventListener("click", () => {
      console.log("result1");
    });

    btn.addEventListener("click", () => {
      console.log("result2");
    });

    btn.addEventListener("click", () => {
      console.log("result3");
    });
};

 

결과

Click 버튼을 누르면 호출된 result1, result2, result3 전부 출력됩니다.
addEventListenr를 사용하면 이벤트를 여러번 사용해도 모두 누적되어 이벤트가 작동됩니다.

 

또 다른 클릭이벤트 .click() .on("click") 의 차이점이 궁금하다면 ↓↓↓↓↓↓↓↓↓↓

👉 클릭이벤트 .click() .on("click") 차이점

[jQuery] 클릭이벤트 .click() .on("click") 차이점

 

Reference : https://velog.io/@won11/JS-Onclick과-Click-Event-차이점