一般的な 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 ) 関数を選択する方法は自分で決めることができます。

2.trigger(event, [data] ) およびtriggerHandler(event, [data] )

クリックなどの特定のイベントが要素にバインドされている場合がありますが、 want プログラム内でこれらのイベントをトリガーすることで、これら 2 つの関数がこの機能を実現できます。

主な違いは、trigger はブラウザのデフォルトのアクションをトリガーするのに対し、triggerHandler はトリガーしないことです。

2 つの関数は、次の例で明確に区別できます。

<!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 はフォーカスをバインドするために再度呼び出されます。イベントイベントハンドラー関数はブラウザーの動作をトリガーしないため、最後の入力要素はフォーカスを受け取りません。

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear