[JS] addEventListener vs onclick

 

* DOM 요소에 클릭이벤트 핸들러를 할당하는 방법 *

1. onclick : DOM 요소에 포함된 이벤트 속성

2. addEventListener : DOM 요소에 이벤트 핸들러를 동적으로 추가하는 메서드.

 

---

 

[ onclick ]

 DOM 요소에 포함된 이벤트 속성. 단일 이벤트 핸들러.

 

<button onclick="alert('버튼클릭')">버튼</button>

=> 태그 내부에 클릭이벤트 핸들러를 직접 지정할 수 있다. (하지만 함수로 분리해서 지정하는 방법 추천!)

 

 - 단일 이벤트 핸들러 

  : 하나의 이벤트에 대해 하나의 핸들러만 설정할 수 있다.

const button = document.querySelector('button');

button.onclick = function() {
    console.log('Button clicked via onclick!');
};

// 기존 핸들러는 덮어쓰여짐
button.onclick = function() {
    console.log('Another handler for onclick!');
};

=> button의 속성값(onclick)으로 함수를 할당하는 것!!

    속성값을 변경하면 덮어씌워지는 것처럼 이벤트 핸들러도 마지막에 할당한 함수로 덮어씌워진다.

 

---

 

 

[ addEventListener ]

DOM 요소에 이벤트 핸들러를 동적으로 추가하는 메서드.

다중 이벤트 핸들러 ( 하나의 요소에 여러 개의 이벤트 할당 가능 )

 

 - 다중 이벤트 핸들러 

  : 동일한 이벤트에 대해 여러개의 핸들러를 추가할 수 있다.  => 이벤트 캡처링/버블링, 제거 기능

const button = document.querySelector('button');

function handleClick() {
    console.log('Button clicked!');
}

// 이벤트 핸들러 추가
button.addEventListener('click', handleClick);

// 추가 핸들러도 가능
button.addEventListener('click', () => {
    console.log('Another click handler!');
});

=> button의 속성에  함수(click이벤트 핸들러)를 추가하는 것!!

   하나의 요소가 여러 속성을 가질 수 있는것처럼 여러가지 이벤트 핸들러 할당 가능.

 

 

---

 

[ DOM 이벤트 전파 방식 ] 

대부분의 DOM 이벤트는 버블링 단계에서 발생.

 

• 캡처링 단계 (상위 요소 → 하위 요소)
• 타깃 단계 (이벤트가 실제 타깃 요소에서 발생)
• 버블링 단계 (하위 요소 → 상위 요소)

 

 

<div id="parent">
    <button id="child">Click me</button>
</div>

 

1. 이벤트 캡처링 (Capturing)

이벤트가 최상위 요소 ~> 하위 요소로 내려가는 방식.

document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent clicked');
}, true); // true는 캡처링 단계에서 실행되도록 설정

document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
}, true);


//	Parent clicked
//	Child clicked

=> addEventListener 의 세번째 변수를 true로 설정!

 

 

2. 이벤트 버블링 (Capturing) 

이벤트가 하위(타깃) 요소 ~> 상위 요소로 전파되는 방식.

document.getElementById('parent').addEventListener('click', () => {
    console.log('Parent clicked');
}, false); // false 또는 생략하면 버블링 단계에서 실행

document.getElementById('child').addEventListener('click', () => {
    console.log('Child clicked');
}, false);


//	Child clicked
//	Parent clicked

=> addEventListener 의 세번째 변수 생략 or false로 설정!

 

---

 

* 이벤트 위임 *

document.getElementById('parent').addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        console.log('Button inside parent clicked');
    }
});

부모요소 클릭 ==> 자식요소가 버튼이라면 작동! 

버튼(자식요소)이 아닌 부모요소에 이벤트를 설정하여 자식요소에서 발생하는 이벤트를 처리.

 

** 하나의 기능을 수행하는 버튼을 여러 요소 내부에서 공통으로 사용하는 경우 활용 가능.

                                                                               (각 요소의 버튼마다 이벤트를 추가할 필요 없음)