一般的な jQuery イベント関数の例
bind( type, [data], fn ) 関数の例
bind() は最も一般的に使用される関数です。イベント処理の前に追加のデータを渡すことができます。
function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
イベント オブジェクトは jQuery で統一されており、イベント オブジェクトはイベント処理関数の唯一のパラメーターとして渡されます
また、event.data を通じて data パラメーターにアクセスする必要があります。なぜ data パラメーターを指定する必要があるのでしょうか?
イベント処理中にイベント ソースからの特定のデータに基づいて特別な処理を実行したいためです
現在、インターネット上では 2 つの議論の余地があります。 :
(1) カスタム要素の属性を使用してデータを保存します。
例:
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
イベント処理関数でデータを取得する:
$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });
attr 関数は、前の講義で得た知識であり、取得するために使用されます。要素の「要素属性」を取得し、カスタマイズされた要素属性を取得できます。 div の後に、次のように表示されます。
<div id="testDiv6">获取自定义数据-2</div>
要素にはカスタム属性がなく、イベント ハンドラー関数を追加するときに追加データが渡されます:
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });
div をクリックした後の結果はメソッド 1 と同じです:
方法 1 はデータの保存と検索に便利ですが、カスタム属性は W3C によって検証されません。方法 2 はデータを保存する方法を自分で見つける必要があり、指定された要素のデータを見つけるためのルールを策定する必要があります。
「開発者」の観点から見ると、方法 1 の方が単純で直感的です。ただし、欠点は大きいため、
one( type, [data], fn ) 関数を選択する方法は自分で決めることができます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery事件处理:trigger和triggerHandler示例</title> script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function() { $("#old").click(function() { $("#divResult").html(""); $("input").trigger("focus"); }); $("#new").click(function() { $("#divResult").html(""); $("input").triggerHandler("focus"); }); $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); }); }) </script></head><body> <button id="old"> .trigger("focus")</button> <button id="new"> .triggerHandler("focus")</button><br /> <br /> <input type="text" value="To Be Focused" /> <div id="divResult"></div> </body> </html>「.trigger」ボタンをクリックすると、 Focused が 2 回呼び出され、入力要素がフォーカスを取得します:「.triggerHandler」ボタンをクリックすると、 Focused が 1 回だけ呼び出され、そして入力要素はフォーカスを取得します要素はフォーカスを取得しません:
つまり、トリガー関数はブラウザーのフォーカス取得のデフォルト動作をトリガーし、入力要素がフォーカスを取得できるようにするため、フォーカス イベント ハンドラー
triggerHandler はフォーカスをバインドするために再度呼び出されます。イベント イベント ハンドラー関数はブラウザーの動作をトリガーしないため、最後の入力要素はフォーカスを受け取りません。