addEventListener

이 전에 onclick 이라는 어트리뷰트를 배운 적이 있다.

onclick은 유저가 해당 요소(element)를 클릭했을 때, 동작하는 함수를 할당해주는 기능이다.

 

onclick의 단점은 각 요소에 기능을 하나만 할당할 수 있다는 것이다. (onclick은 click 기능만 가능하다는 의미)

이보다 더 좋은 방법은, 요소에 addEventListener를 할당해 주는 것이다.

 

---

 

addEventListener의 문법은 아래와 같다.

addEventListener('eventName', function)

 

---

 

addEventListener 어트리뷰트를 이용해서 onclick 기능을 구현해보자

<button class="button">Click Me!</button>
<script>
    const button = document.querySelector('.button')
    button.addEventListener('click', () => {
        alert('안녕~!')
    })
</script>

1. document.querySelector를 통해 button 요소(element)를 지정할 수 있도록 설정했다.
2. button 요소에 이벤트를 부여하는 addEventListener attribute를 할당한다.

이를 실행하면 아래와 같이 된다.

Click Me! 를 클릭하면 addEventListener가 나온다.

 

addEventListener의 첫번째 argument에 'click' 문자열이 있는 것을 알 수 있다.

이것은 브라우저에서 지원되는 문자열로 저장된 이벤트 중 하나로써,

다양한 이벤트를 추가할 수 있다.

 

브라우저에서 지원되는 다양한 이벤트들은 Browser DOM Events를 찾아보면 알 수 있다.

 

※ addEventListener에는 마우스 이벤트, 키보드 이벤트 등등 다양하다.

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN