반응형
이벤트 핸들러 등록
이벤트 핸들러 프로퍼티 방식
addEventListener 메서드 방식
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<script>
const $button = document.querySelector('button');
// 이벤트 핸들러 프로퍼티 방식
// $button.onclick = function () {
// console.log('button click');
// };
// addEventListener 메서드 방식
$button.addEventListener('click', function () {
console.log('button click');
});
</script>
</body>
</html>
<!-- addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해 -->
<!-- 하나 이상의 이벤트 핸들러를 등록할 수 있다. -->
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<script>
const $button = document.querySelector('button');
$button.addEventListener('click', function () {
console.log('[1]button click');
});
$button.addEventListener('click', function () {
console.log('[2]button click');
});
</script>
</body>
</html>
<!-- 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 핸들러만 등록된다. -->
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<script>
const $button = document.querySelector('button');
const handleClick = () => console.log('button click');
$button.addEventListener('click', handleClick);
$button.addEventListener('click', handleClick);
</script>
</body>
</html>
동일한 HTML 요소에서 발생한 동일한 이벤트에 대해
이벤트 핸들러 프로퍼티 방식은 하나 이상의 이벤트 핸들러를 등록할 수 없지만,
addEventListener 메서드 방식은 하나 이상의 이벤트 핸들러를 등록할 수 있고,
이때 이벤트 핸들러는 등록된 순서대로 호출된다.
단, addEventListener 메서드를 통해 참조가 동일한 이벤트 핸들러를 중복 등록하면
하나의 이벤트 핸들러만 등록된다.
반응형
이벤트 핸들러 제거
이벤트 핸들러 프로퍼티 방식
<!-- removeEventListener 메서드로 이벤트 핸들러 프로퍼티 방식으로 등록한 -->
<!-- 이벤트 핸들러를 제거할 수 없다. -->
<!-- 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려면 -->
<!-- 이벤트 핸들러 프로퍼티에 null을 할당하면 된다. -->
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<script>
const $button = document.querySelector('button');
const handleClick = () => console.log('button click');
// 이벤트 핸들러 프로퍼티 방식으로 이벤트 핸들러 등록
$button.onclick = handleClick;
// removeEventListener 메서드로
// 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거할 수 없다.
$button.removeEventListener('click', handleClick); // 실패
// 이벤트 핸들러 프로퍼티에 null을 할당하여 이벤트 핸들러를 제거한다.
$button.onclick = null;
</script>
</body>
</html>
removeEventListener 메서드 방식
<!-- removeEventListener -->
<!-- addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 -->
<!-- 전달한 인수가 일치하면 이벤트 핸들러가 제거된다. -->
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<script>
const $button = document.querySelector('button');
const handleClick = () => console.log('button click');
// 이벤트 핸들러 등록
$button.addEventListener('click', handleClick);
// 이벤트 핸들러 제거
$button.removeEventListener('click', handleClick, true); // 실패
$button.removeEventListener('click', handleClick); // 성공
</script>
</body>
</html>
이벤트 객체
이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다.
생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달된다.
<!-- 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. -->
<!-- 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달된다. -->
<!DOCTYPE html>
<html>
<body>
<p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
<em class="message"></em>
<script>
const $msg = document.querySelector('.message');
// 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달된다.
function showCoords(e) {
$msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
}
document.onclick = showCoords;
</script>
</body>
</html>
<!-- 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록한 경우 -->
<!-- event가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다. -->
<!DOCTYPE html>
<html>
<head>
<style>
html, body { height: 100%; }
</style>
</head>
<body onclick="showCoords(event)">
<p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
<em class="message"></em>
<script>
const $msg = document.querySelector('.message');
// 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 매개변수로 전달된다.
function showCoords(e) {
$msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
}
</script>
</body>
</html>
이벤트 객체의 공통 프로퍼티
// 이벤트 객체의 공통 프로퍼티
// type
이벤트 타입
// target
이벤트를 발생시킨 DOM 요소
// currentTarget
이벤트 핸들러가 바인딩된 DOM 요소
// eventPhase
이벤트 전파 단계
0 : 이벤트 없음 / 1 : 캡처링 / 2 : 타겟 / 3 : 버블링
// bubbles
이벤트를 버블링으로 전파하는지 여부
다음 이벤트는 bubbles: false로 버블링하지 않는다.
- 포커스 이벤트 : focus / blur
- 리소스 이벤트 : load / unload / abort / error
- 마우스 이벤트 : mouseenter / mouseleave
// cancelable
preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부
다음 이벤트는 cancelable: false로 취소할 수 없다.
- 포커스 이벤트 : focus / blur
- 리소스 이벤트 : load / unload / abort / error
- 마우스 이벤트 : dblclick / mouseenter / mouseleave
// defaultPrevented
preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부
// isTrusted
사용자의 행위에 의해 발생한 이벤트인지 여부
예를 들어, click 메서드 또는 dispatchEvent 메서드를 통해 인위적으로 발생시킨 이벤트인 경우
isTrusted는 false 이다.
// timeStamp
이벤트가 발생한 시각(1970/01/01/00:00:0부터 경과한 밀리초)
// e.target은 change 이벤트를 발생시킨 DOM 요소인 $checkbox를 가리키고,
// e.currentTarget은 이벤트 핸들러가 바인딩된 DOM 요소 $checkbox를 가리킨다.
$checkbox.onchange = e => {
console.log(e.target === e.currentTarget); // true
}
Event (2)를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형