프로필카테고리질문하기
로그인 계정 만들기

onclick addEventListener 차이점

153 개월 전
자바스크립트에서 onclick과 addEventListener의 차이점은 무엇인가요?
onclick:
<input type="button" onclick="alert('hello')">

addEventListener:

var button = document.querySelector("input"); button.addEventListener("click", function() { alert('hello') });
답변하기 의견 추가
의견 (0)
더 많은 의견 보기

답글 (1)

onclick에는 하나의 콜백만 지정할 수 있어요. addEventListener를 사용하면 여러개의 이벤트 리스너를 추가할 수 있어요.

그런데 그것보다 더 중요한 차이가 있어요.

관심의 분리

HTML에서 onclick을 지정하게 되면 HTML 문서가 엘리먼트의 행동을 정하게 되고,

그것은 관심의 분리(Separation of concerns) 측면에서 좋지 않아요.

HTML은 웹 페이지를 구조화합니다.

CSS는 웹 페이지의 모양을 지정합니다.

자바스크립트는 웹 페이지가 상호작용하고 행동하는 방식을 지정합니다.

예를들어 100개의 페이지에 각각 버튼이 한개씩 있다고 생각해보세요. 만약 버튼을 클릭했을 때의 동작을 바꾸려고 한다면 이 모든 페이지들을 다 수정해야 할거에요.

자바스크립트를 HTML으로부터 분리함으로써 필요없는 반복을 줄이게 되고 전체 어플리케이션의 유지를 더 쉽게 만들 수 있어요.

어떤게 더 좋나요?

항상 자바스크립트를 HTML 페이지로부터 분리시킬 수 있는 방법을 사용하세요. 함수도 재사용할 수 있으면 더 좋겠죠.

아래에 몇 가지 방법이 있어요.

addEventListener
var handler = function() { alert('hello') }; document.querySelector('.element').addEventListener('click', handler);
jQuery
var handler = function() { alert('hello') }; $('.element').on('click', handler);
의견 추가
의견 (0)
더 많은 의견 보기