이벤트, 이벤트핸들러

이벤트란?

'시스템 내에서 일어나는 사건'을 뜻한다. 

각각의 이벤트들을 이벤트 핸들러(handler)를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

 

웹 사용자가 버튼 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면?(예제)

const handleClick = function(){     window.alert("환영합니다^^") } const button = document.querySelector("button") button.onclick = handleClick // 여기가 포인트, 클릭이벤트가 발생했을 때 handleClick이라는 함수가 실행된다 기본 형태는 타겟.on이벤트명 = 이벤트핸들러함수 이다.

주의사항

이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 엄연히 다르다!

button.onclick = handleClick  // (이벤트 핸들러 등록) button.onclick = handleClick()  // handleClick 호출 후 반환값을 대입한다 (굳이?) 함수를 호출하는 것이 반환값을 대체하고자 함이 아니기 때문에

이벤트 핸들러 등록

 

---

addEventListener & 이벤트 객체

addEventListener : 웹이 가지고 있는 공통 메서드라고 할 수 있다.

onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은, addEventListener 메서드를 활용하는 것이다.

addEventListener는 메소드이다 보니 2개의 인자를 전달받는다.

이벤트명을 나타낸 느 문자명, 이벤트 핸들러 역할을 할 함수

 

addEventListener을 사용하는 것의 이벤트 핸들러 속성을 사용하는 것보다의 장점은?

1. 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메서드가 존재한다.

2. 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

3. 추가적인 옵션 사항들이 제공된다.

 

이벤트 객체

 

이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.

클릭 이벤트가 발생하게 되면 이벤트 객체를 함수에다가 전달해 주는 것 그것을 이벤트 핸들러가 사용하려면 매개변수가 있어야 한다.

target

이벤트가 발생한 순간의 타겟을 알려준다.