[Javascript] onclick VS addEventListener 차이점?

What is the difference between onclick and addEventListener?

 

 

Javascript EventTarket 객체

 

Javascript를 통해 DOM을 조작하는 부분에서 가장 많이 사용하는 객체는 EventTarget 객체다. 객체의 조작에 따라 Evenvt를 추가할 수 있는 방법은 크게 onclick을 사용하거나 addEventLintener() 메소드를 사용할 수 있다.

 

둘다 Event 객체로 사용할 수 있지만 두개의 차이점은 존재한다. 

 

onclick

onclick 속성은 이벤트 객체를 하나만 추가할 수 있다.

Button 태그를 생성하고, onclick에 2개의 이벤트 객체를 할당하면, 첫번째 이벤트만 activated 된다.

 

 

See the Pen Untitled by Blackys (@ysheokorea) on CodePen.

 

 

addEventLitener()

addEventLitener() 메소드는 여러개의 이벤트를 추가할 수 있다. 

2개의 addEventLitener()를 생성하고, 각각 이벤트 핸들러 함수를 할당한다. 클릭 이벤트가 발생할 경우 할당된 2개의 이벤트 모두 activated 된다.

 

 

See the Pen Untitled by Blackys (@ysheokorea) on CodePen.

 

 

가급적이면 addEventListener를 사용하자

 

onclick을 굳이 사용하는 이유는 결론적으로 호환성 때문이다. 과거 DOM Level 1 상태에서 onclick이 제공되어서 사용되었지만, DOM Level 2에서는 addEventListener가 제공된다.

 

간혹 addEventListener를 제공하지 않는 웹 브라우저(IE8 이전 버전)에서는 onclick을 사용해야 할 것이다. 또한 단 하나의 이벤트만 발생해야 하는 객체에서는 onclick을 사용하는게 맞다.

 

위와 같은 상황이 아니라면 가급적이면 addEventListener()을 사용하는게 코드의 직관성이나 운영보수성을 위해서 옳은 판단이다.