jQuery: 複数のイベントから同じ関数をトリガーする
この記事では、jQuery で複数のイベントから同じ関数をトリガーする方法について説明します。 jQuery .on() API を使用してこれを行う方法の 2つの例を示します。
最初の例は、HTML フォーム入力でのユーザーの動きを追跡します。 2つ目は HTML 要素の背景色を変更します。
jQuery Multiple Events: HTML フォームでのユーザー インタラクションの追跡
この例では、2つのユーザー インタラクションを追跡する匿名関数を設定します。 1つ目は onblur で、2つ目は onmouseleave です。
普段は2ヶ所に書く必要がありますが、.on() APIを使えば同時にできます。 まず、複数のイベントの要素を選択します。
次に、.on() を使用して、onblur および onmouseleave イベントを監視します。
これを行うと、ユーザーがフォーム入力を切り替えるタイミングを追跡できます。 必要に応じて、フォームの検証をプロセスに実装できます。
以下では、2つの HTML 入力を持つ HTML フォームがあります。 次に、jQuery .on() API が onblur および onmouseleave イベントをリッスンします。
このプロセス中に、メッセージを Web ブラウザーのコンソールに記録します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Basic Form Validation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
form { border: 2px solid #1560bd; font-size: 2em; padding: 1.2em; }
</style>
</head>
<body>
<main>
<form id="html_form">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
<input type="submit" name="submit" value="Submit form">
</form>
</main>
<script>
$("document").ready(function() {
// Use the "on" API to attach anonymous functions
// to the focus, blur, and mouseleave events. Although
// we only show console.log messages; you can implement
// form validation routines.
$("#first_name, #last_name").on({
focus: function() {
$(this).css("outline", "3px solid #1a1a1a");
},
blur: function() {
$(this).removeAttr("style");
console.log("Blur left");
},
mouseleave: function() {
$(this).removeAttr("style");
console.log("Mouse left");
},
})
});
// Prevent form submission
$("#html_form").submit(function(e) {
return false;
})
</script>
</body>
</html>
出力：
jQuery の複数のイベント: 背景色の変更
マウスの動きに基づいて要素の背景色を変更できます。 Vanilla JavaScript では、onmouseenter と onmouseleave を使用できます。
しかし、jQuery .on() API を使用すると、すべてを 1 行で実行できますが、読みやすくするために分割することもできます。 以下では、マウスを main 要素の上に移動すると、その背景色が変わります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multiple Events: Change page background color</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh;}
main { font-size: 2em; padding: 1em; border: 5px solid #1a1a1a; display: block;}
</style>
</head>
<body>
<main id="main">
<p>This is a big text. Move your mouse and see what happens.</p>
</main>
<script type="text/javascript">
$("document").ready(function() {
// Change the background color of the main
// element when the user moves their mouse over
// it.
$("#main").on({
mouseenter: function() {
$(this).css("background", "#aaa");
},
mouseleave: function() {
$(this).css("background", "#fafafa");
},
})
});
</script>
</body>
</html>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn