개발할 때 저는 항상 이벤트 핸들러 할당을 addEventListener만을 사용하여 진행해 왔습니다. 결국엔 addEventListener를 사용하는 것이 가장 일관성있고 최신 기법이라고 생각했기 때문인데요, 이것만으로는 솔직히 이유가 많이 부족했습니다.
그래서 문서를 다시 보면서 이벤트 핸들러 할당에는 어떤 방식이 있는지, 또 각각의 장단점은 무엇인지 살펴보는 시간을 갖고자 합니다.
결론을 미리 말씀드리자면, addEventListener 를 사용하는게 여러모로 좋으나 나머지 방식 또한 정확히 인지하고 있어야 상황에 따른 유연한 대처가 가능하다는 것입니다!
이벤트 핸들러 할당의 종류
HTML 속성 할당, DOM 프로퍼티에 직접 할당, DOM 메소드(addEventListener) 호출 3가지가 있습니다.
1. HTML 속성 할당
<input type="button" onclick="alert(event.type + this.value)" value="이벤트 타입">이렇게 안에서 바로 javascript 코드를 진행하면 되고, 이벤트 객체는 event 를 통해, 이벤트가 발생한 요소는 this 를 통해 접근하면 됩니다. 코드가 길어지면 코드를 따로 함수로 묶고 그 함수를 실행합니다.
단점으로는, HTML 태그 중간에 Javascript가 들어간다는 것이 어색하다는 점, 긴 코드를 끼워 넣는게 불편하다는 점이 있습니다.
React 는 근데 왜 이렇게 하는지 나중에 다시 블로깅각 잡아서 꼭 정리하도록!
2. DOM 프로퍼티에 직접 할당
elem.onclick = () => alert("안녕하세요.");DOM element 객체의 프로퍼티(on + 이벤트명. 모두 소문자)에 이벤트 핸들러를 할당하는 방법입니다. 이 방법은 괜찮은 방법이라고 합니다.
다만 단점은, 2가지 이상 복수의 핸들러를 할당하는 것이 불가능하다는 것입니다.
3. DOM 메소드(addEventListener) 호출
class Menu {
handleEvent(event) {
// mousedown -> onMousedown
let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
this[method](event);
}
onMousedown() {
elem.innerHTML = "마우스 버튼을 눌렀습니다.";
}
onMouseup() {
elem.innerHTML += " 그리고 버튼을 뗐습니다.";
}
}
let menu = new Menu();
elem.addEventListener('mousedown', menu);
elem.addEventListener('mouseup', menu);평소 사용해왔던 것과는 다른 재밌는 예제를 가져왔습니다. 객체도 위와 같은 인터페이스를 따른다면 이벤트 핸들러로 동작할 수 있다고 합니다. 지금은 눈도장만 찍어두고 언제한번 블로깅각 잡아서 어떻게 하면 이것을 잘 삶아먹을 수 있는지 고민하는 시간을 가져봐야 겠습니다.
DOM element 객체의 addEventListener 라는 메서드에 이벤트 핸들러를 할당하면 됩니다.
이 방법은
- 가장 유연한 방법이고
- 코드를 가장 길게 구성할 수가 있습니다.
- 그리고
transitionend,DOMContentLoaded같은 이벤트를 적용할 때는 오직 이 메서드를 사용해야 합니다. - 가장 중요한 장점으로는
addEventListener,removeEventListener를 통해 여러개의 핸들러를 추가, 삭제 할 수 있다는 점입니다.
removeEventListener 활용 테크닉 블로깅각 잡기
이렇게 정리해놓고 다시 살펴보니 제가 addEventListener 를 왜 사용해야 하는지, 다른것은 왜 그다지 좋은 방법이 아닌지에 대한 감이 왔습니다. 그럼에도 불구하고 나머지 방법또한 상황에 따라 유연하게 사용해야될 시점이 올 수도 있다는 것을 믿습니다. 합당한 근거가 없이 '저것이 무조건 좋다'고 따라하기만 하는 것은 옳지 않다고 생각하며, 개발자로서 한쪽에만 생각이 매몰되지 않도록 항상 경계하고 노력하겠습니다.
P.S. 블로깅각 3개 잡았다..
참고문헌
