JavaScript에서 다양한 이벤트 처리기

요소를 클릭하는 것 외에도 다른 이벤트들이 존재합니다. 예를 들어, dblclick 이벤트를 사용하여 요소를 더블 클릭하는 것을 감지할 수 있고, mouseover 이벤트를 사용하여 커서를 요소 위에 올리는 것, 그리고 mouseout 이벤트를 사용하여 커서가 요소를 벗어나는 것을 감지할 수 있습니다.

이때 하나의 요소에 다양한 유형의 이벤트 처리기를 연결할 수 있습니다. 예를 들어, 하나의 요소에 커서 올리기에 대한 반응과 커서가 벗어나는 것에 대한 반응을 연결해 봅시다:

button.addEventListener('mouseover', function() {
	console.log('1');
});
button.addEventListener('mouseout', function() {
	console.log('2');
});

버튼이 주어집니다. 버튼을 더블 클릭할 때 어떤 메시지를 출력하세요.

버튼이 주어집니다. 버튼 위에 커서를 올릴 때 어떤 메시지를 출력하세요.

버튼이 주어집니다. 커서가 버튼을 벗어날 때 어떤 메시지를 출력하세요.

버튼이 주어집니다. 버튼 위에 커서를 올릴 때 하나의 메시지를 출력하고, 커서가 벗어날 때 다른 메시지를 출력하세요.