이벤트
이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수
이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것. (개발자는 사용자가 언제 버튼을 클릭하는지 알 수 없지만, 브라우저는 알 수 있으므로 브라우저에게 위임한다)
이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식
이벤트 핸들러 등록
이벤트 핸들러 어트리뷰트 방식
<body>
<button onclick="sayHi('Ko')">Click me!</button>
<script>
function sayHi(name) {
console.log(`Hi! ${name}`);
}
</script>
</body> 버튼의 어트리뷰트 값으로 함수 호출문을 할당했다. 이 때, 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미한다.
이벤트 핸들러 어트리뷰트 방식은 함수 호출문을 할당하므로 이벤트 핸들러에 인수 전달이 가능하다.
이벤트 핸들러 프로퍼티 방식
window객체와 Document,HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. 이벤트 핸들러 프로퍼티의 키는 이벤트 어트리뷰트와 마찬가지로 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다. 이벤트 핸들러 프로퍼티에 함수를 바인딩 하면 이벤트 핸들러가 등록된다.
이벤트 핸들러 프로퍼티 방식은 HTML과 자바하지만, 하나의 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩 가능하다.)
이벤트 핸들러 프로퍼티에 함수를 바인딩 할때는 주의할 점이 있다. 아래 예시를 보자.
<body>
<button>Click me!</button>
<script>
const $button = document.querySelector('button');
$button.onclick = function sayHi() {
console.log(`Hi!`);
}
</script>
</body>위에꺼는 정상적으로 호출되지만, 아래는 되지 않는다
<body>
<button>Click me!</button>
<script>
const $button = document.querySelector('button');
$button.onclick = sayHi(); //함수참조, 즉 sayHi 를 등록해야된다.
function sayHi() {
console.log(`Hi!`);
}
</script>
</body>이유는 이벤트 프로퍼티로 함수를 바인딩할때 함수 참조를 바인딩 한 것이 아니라 함수의 반환값을 바인딩 했기 때문이다.
addEventListener 메서드 방식
addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 등록할 수 있다.
<body>
<button>Click me!</button>
<script>
const $button = document.querySelector('button');
$button.addEventListener('click',sayHi);
$button.addEventListener('click',sayBye);
function sayHi() {
console.log('Hi!!');
}
function sayBye() {
console.log('Bye..');
}
</script>
</body>