🌼 40.10 이벤트 핸들러에 인수 전달
이벤트 핸들러 어트리뷰트 방식은 함수 호출문 형태를 사용하기 때문에 인수를 전달할 수 있지만 프로퍼티, 메서드 방식은 함수 자체를 등록해야하기 때문에 인수를 전달할 수 없다. 대신 아래의 방법을 사용해서 인수를 전달할 수 있다.
-
이벤트 핸들러 내부에서 함수를 호출하며 전달하기
-
이벤트 핸들러를 반환하는 함수를 호출하면서 전달하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<label>User Name: <input type="text" class="name" /></label>
<label>ID: <input type="text" class="id" /></label>
<em class="message"></em>
<script>
const MIN_INPUT_TEXT_LENGTH = 5;
const $name = document.querySelector(".name");
const $id = document.querySelector(".id");
const $msg = document.querySelector(".message");
const checkUserNameLength = (min) => {
$msg.textContent =
$name.value.length < min
? `이름은 ${min}자 이상 입력해주세요.`
: "";
};
$name.onblur = (e) => {
checkUserNameLength(MIN_INPUT_TEXT_LENGTH);
};
const checkUserIdLength = (min) => (e) => {
$msg.textContent =
$id.value.length < min
? `아이디는 ${min}자 이상 입력해주세요.`
: "";
};
// onblur에 실제 바인딩된 함수는 아래와 같다.
// (e) => {
// $msg.textContent =
// $id.value.length < 5
// ? `아이디는 ${5}자 이상 입력해주세요.`
// : "";
// }
$id.onblur = checkUserIdLength(MIN_INPUT_TEXT_LENGTH);
</script>
</body>
</html>🌼 40.11 커스텀 이벤트
Event, UIEvent, MouseEvent 같은 이벤트 생성자 함수를 호출하면 이벤트 객체가 생성되며 이렇게 생성된 객체에는 임의의 이벤트 타입을 지정할 수 있다. 이렇게 개발자의 의도로 생성된 이벤트를 커스텀 이벤트라고 한다.
-
이벤트 객체의 첫번째 인자에는 이벤트 타입을 나타내는 문자열을 전달한다.
-
이벤트 객체의 두번째 인자에는 전달하고 싶은 이벤트 객체의 고유 프로퍼티를 객체로 전달한다. bubbles와 cancleable 속성은 기본적으로 false이다.
🌼 40.11.2 커스텀 이벤트 디스패치
커스텀으로 생성된 이벤트는 dispatchEvent 메서드로 디스패치(이벤트를 발생시키는 행위)할 수 있다. 해당 메서드에 이벤트 객체를 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생한다.
-
dispatchEvent 메서드를 실행하면 커스텀 이벤트에 바인딩된 이벤트 핸들러를 동기적으로 실행시킨다.
-
CustomEvent는 첫번째 인자에 이벤트 타입, 두번째 인자에 이벤트와 함께 전달하고 싶은 정보를 detail 프로퍼티를 포함하는 객체 형태로 전달한다.
-
커스텀 이벤트는 addEventListener 메서드를 사용하여 이벤트 핸들러에 등록해야 한다.
출처: 모던 자바스크립트 Deep Dive-이웅모
