TIL] Deep Dive-Event(3)
🌼 パラメータを40.10イベントハンドラに転送
イベントハンドラツリー方式では関数呼び出し文の形式でパラメータを渡すが、Property方式とMethod方式では関数自体を登録する必要があるため、パラメータを渡すことはできない.逆に、以下の方法でパラメータを渡すことができます.
イベントハンドラで関数を呼び出して渡す
イベントハンドラを返す関数を呼び出して渡す
<!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カスタムイベント
イベント、UIイベント、MouseEventなどのイベントジェネレータ関数を呼び出すことで、イベントオブジェクトを作成し、これらのオブジェクトに任意のイベントタイプを指定できます.このように開発者の意図で生成されるイベントをCustomイベントと呼ぶ.
イベント・オブジェクトの最初のパラメータは、イベント・タイプを表す文字列を渡します.
イベントオブジェクトの2番目のパラメータで、渡すイベントオブジェクトの固有のpropertyをオブジェクトに渡します.気泡と消去可能な属性は基本的にfalseです.
🌼 40.1.12カスタムイベント派遣
カスタマイズによって作成されたイベントは、dispatchEventメソッドによって配布できます(イベント発生の動作).このメソッドにイベントオブジェクトを渡すと呼び出され、引数として渡されるイベントタイプのイベントが発生します.
dispatchEventメソッドは、customイベントにバインドされたイベントハンドラを同期して実行します.
CustomEventは、イベントタイプを詳細を含むオブジェクトとして1番目のパラメータに渡し、2番目のパラメータはイベントとともに渡したい情報を渡します.
addEventListenerメソッドを使用して、カスタムイベントをイベントハンドラに登録する必要があります.
Reference
この問題について(TIL] Deep Dive-Event(3)), 我々は、より多くの情報をここで見つけました https://velog.io/@link717/TIL-Deep-Dive-Event3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol