JavaScript トリガー イベント
JavaScript では、プリミティブ メソッド initEvent() を使用して新しいイベントを作成していました。 最新の更新では、カスタム イベントを作成するための new キーワードが追加されました。 また、JavaScript 用に構築されたインベントリにはイベントの豊富なコレクションがあります。
次のセクションでは、事前定義されたイベントの 1つの例と、それがどのようにトリガーされるかをプレビューします。 また、動作メカニズムとして詳細を持つ特注のイベントもあります。 それでは、飛び込みましょう！
JavaScript で事前定義されたイベントをトリガーする
ここでは、値入力用に input テキストボックスを選択し、後で onclick 属性を使用して addEventListener() メソッドと同等であることを確認します。
そのため、input フィールドのインスタンスを取得し、条件付きブロックを介して設定します。 次に、click イベントがトリガーされるたびに、input が取得され、それに応じて照合されます。
したがって、イベントの関数が起動されます。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<input type="text" id="vals">
<button onclick="abc()">Submit</button>
<script>
function abc(){
var x = document.getElementById("vals").value;
if(x ==='1'){
console.log("1")}
else{
console.log("No!")
}
}
</script>
</body>
</html>
出力：
JavaScript でカスタム イベントとトリガーを作成する
このインスタンスを示すために、バブル イベントの伝播で親子ツリーを使用します。 主なタスクは、form が親である form および textarea 要素を作成することです。
次に、new CustomEvent() でイベントを作成します。 イベントの名前は cool で、bubbles のオブジェクトを true として、詳細は textarea の値になります。
後で、form には eventListener があり、cool イベントが発生したときにそのコンテンツで動作することを示します。 最後に、dispatchEvent() でイベントを発生させます。これは、textarea の eventListener です。
コードと出力をプレビューしてみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<title>Trigger event</title>
</head>
<body>
<form>
<textarea></textarea>
</form>
<script>
const form = document.querySelector('form');
const textarea = document.querySelector('textarea');
const event = new CustomEvent('cool', {
bubbles: true,
detail: { text: () => textarea.value }
});
form.addEventListener('cool', (e) => console.log(e.detail.text()));
textarea.addEventListener('input', (e) => e.target.dispatchEvent(event));
</script>
</body>
</html>
出力：
カスタム イベントによると、textarea 入力の値を出力することになっていました。 そして最後に、コンソールに出力が実行されたことが表示されます。
