6. 이벤트 핸들러의 방식

브라우저는 키보드를 누를때나, 스크롤을 내릴때나, 클릭을 할때나

항상 이를 감지하고 이벤트를 발생시킨다. 특정 타입의 이벤트에

반응하여 어떠한 동작을 실행하고싶다면 이 이벤트 핸들러를 등록하여 할 수 있다.

 

 

- 이벤트 핸들러

이벤트가 발생했을 때 호출될 함수를 말한다.

 

- 이벤트 핸들러 등록

브라우저에게 이벤트 핸들러 호출을 위임하는것을 말한다.

 

- 이벤트 타입

브라우저에서 일어나는 이벤트의 종류들을 말한다.

click - 마우스를 클릭하였을 때

dbclick - 마우스를 더블 클릭하였을 때

keyup - 누르고 있던 키를 놓았을 때

등 자주 쓰는 이벤트 타입이 더 있고 총 200가지가 넘는다고 한다.

 

 

 

이벤트핸들러에는 총 3가지 방식이 있다.

1. 이벤트 핸들러 어트리뷰트 방식

HTML의 요소에 접두사 'on' 과 이벤트 타입의 'click'등 으로 이루어져있고

이에 스크립트의 함수를 할당하고 호출한다.

이때 알아둘 점은 onclick 자체에 함수문이 할당되는 방식이라는것이다.

<button onclick="func()">어트리뷰트 방식</button>
<script>
function func(){
 console.log('안녕하세요!');
}
</script>

2. 이벤트 핸들러 프로퍼티 방식

어트리뷰트 방식과 마찬가지로 'on' 접두사와 이벤트 타입으로 이루어져있다.

다른점은 이벤트를 발생시킬 요소 이벤트 타겟과

이벤트 핸들러를 지정해주어야한다.

알아둘 점은 하나의 이벤트 타겟에는 하나의 이벤트만 바인딩 할 수 있다는 것이다.

재할당 시 뒤에 있는 이벤트가 호출된다.

<button>프로퍼티 방식<button>
<script>
let btn = documnet.querySelector("button");
btn.onclick = function(){
console.log("안녕하세요!");
}
</script>

3. addEventListener 방식

addEventListener 방식에서는 위에서 기술한 'on' 접두사를 붙였던것과 다르게

접두사를 제외한 이벤트 타입만 기입한다.

또 다른점은 이벤트 핸들러(함수)를 바인딩하는것이 아닌 인수로 전달하는 방식이기때문에

한번의 이벤트 타입으로도 다수의 이벤트 핸들러를 호출시킬 수 있다.

<button> addEventListener </button>
<script>
let btn = document.querySelector("button");
btn.addEventListener("click",function(){
console.log("안녕하세요!");
}
</script>

 

이벤트 핸들러의 이벤트 객체

브라우저에서 일어난 이벤트들은 이벤트 타입별로 각 이벤트 객체를 생성한다.

생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수에 할당된다.

각 이벤트 객체들은 console.log를 통하여 확인해보자. 

 

 

 

 

예제

See the Pen Untitled by qirtudgus (@qirtudgus) on CodePen.