ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryあなたがバインドできるイベントの完全なリスト

jQueryあなたがバインドできるイベントの完全なリスト

Lisa Kudrow
Lisa Kudrowオリジナル
2025-03-02 00:40:10440ブラウズ

jQuery Full List of Events You Can Bind To

JQueryと組み合わせたJavaScriptは、多くのマウスイベント、キーボードイベント、ブラウザイベント、DOM要素イベントをキャプチャでき、

bind()、およびその他の方法を使用して、イベントトリガー操作を実行できます。知っておくべき主要なイベントのリスト:live()blurfocusfocusinfocusoutload、、resizescrollunloadclickdblclickmousedownmouseupmousemovemouseover mouseoutマウスイベントmouseenter mouseleavechangeselectsubmitkeydownkeypresskeyuperror

scrollclickdblclick> mousedown例:mouseup mousemove mouseoverキーボードイベントmouseout mouseentermouseleaveloadresizescroll unload error例:

ブラウザイベント
(function($) {
    $(document).ready(function() {
        $('#id').bind('click', function(e) {
            // 鼠标事件触发(元素被点击)
        });
    });
})(jQuery);

keydownkeypresskeyup

例:
(function($) {
    $(document).ready(function() {
        $(document).bind('keypress', function(e) {
            // 键盘事件触发
        });
    });
})(jQuery);

dom要素イベント

loadresizescrollunloaderror

(function($) {
    $(document).ready(function() {
        // 浏览器事件触发(文档对象模型加载完成)
    });
})(jQuery);

例:

blur focusdemo focusin focusout参照してください:キーボードキーのキーコードを見つけてくださいchange selectjQueryイベントバインディングリストFAQ(FAQ)submit

の違いは何ですか?

(function($) {
    $(document).ready(function() {
        $('#id').bind('blur', function(e) {
            // DOM事件触发(输入焦点离开)
        });
    });
})(jQuery);
JQueryの

および

メソッドは、両方ともイベントを要素に接続するために使用されます。ただし、2つの間にはいくつかの重要な違いがあります。

メソッドは、もともとjQueryが提供する追加のイベントの方法です。ページが読み込まれた後に動的に追加される要素では動作しません。一方、jQuery 1.7で導入された

メソッドは、後で動的に追加される既存の要素と要素の両方に適しています。パフォーマンスが向上し、機能が向上しているため、新しいコードで

を使用することをお勧めします。

jqueryでイベントを解除する方法は?

jQueryでのバインドイベントには、.unbind()メソッドを使用できます。このメソッドは、.bind()メソッドを使用して添付されたイベントハンドラーを削除します。要素のすべてのイベントハンドラーを削除するか、イベントタイプをパラメーターとして指定して、特定のイベントハンドラーを削除するだけです。たとえば、$("#element").unbind("click")は、id 'element'を持つ要素のすべてのクリックイベントハンドラーを削除します。

jQueryの同じ要素に複数のイベントをバインドできますか?

はい、jqueryの同じ要素に複数のイベントをバインドできます。これを行うには、オブジェクトを.on()メソッドに渡すことで行うことができます。キーはイベント名、値はイベントハンドラーです。たとえば、$("#element").on({click: function(){}, mouseover: function(){}})は、クリックとマウスオーバーの両方のイベントを、ID「要素」を持つ要素にバインドします。

jQueryでのイベントの伝播を停止する方法は?

jQueryでのイベントの伝播を停止するには、.stopPropagation()メソッドを使用できます。この方法は、DOMツリーでイベントが泡立つのを防ぎ、親ハンドラーがイベント通知を受信するのを防ぎます。次のように、イベントハンドラーでこの方法を呼び出すことができます:function(event){ event.stopPropagation(); }

jQueryのイベントデリゲートとは何ですか?どうすれば使用できますか?

JQueryのイベント委任は、イベントを特定の要素に結合する代わりに、イベント処理を親要素に委任する技術です。これは、多くの要素を持っているか、要素を動的に追加する場合に特に便利です。セレクターを

メソッドを使用して2番目のパラメーターとして指定することにより、イベントデリゲートを使用できます。たとえば、すべての子要素のクリックイベントを親要素に委任します。 .on() $("#parent").on("click", ".child", function(){}) jqueryでプログラムでイベントをトリガーする方法は?

jQueryでプログラムでイベントをトリガーするには、

メソッドを使用できます。このメソッドは、選択した要素上の指定されたイベントとイベントのデフォルトの動作をトリガーします(フォームの提出など)。たとえば、

は、id 'element'を持つ要素のクリックイベントをプログラム的にトリガーします。 .trigger() $("#element").trigger("click") jqueryのイベントハンドラーにデータを渡すことはできますか?

はい、jqueryのイベントハンドラーにデータを渡すことができます。これを行うには、2番目のパラメーターとしてオブジェクトを

メソッドに渡すことで行うことができます。このオブジェクトのプロパティは、イベントハンドラー内のイベントオブジェクトのプロパティとして使用できます。たとえば、要素がクリックされると

が「ジョン」を表示します。 .on()

.live()の違いは何ですか? .on()

JQueryの

および.live()メソッドは、両方ともイベントを要素に接続するために使用されます。ただし、jQuery 1.7には、廃止された.on()メソッドにはいくつかの制限と特徴があります。特定のイベント(「送信」や「フォーカス」など)では機能せず、イベントハンドラーをドキュメントルートに添付して、パフォーマンスの問題を引き起こす可能性があります。一方、.live()メソッドはこれらの制限を克服し、推奨される方法です。 .on()

jQueryのイベントのデフォルトアクションをブロックする方法は?

jQueryのイベントのデフォルトアクションをブロックするには、

メソッドを使用できます。イベントがキャンセル可能な場合、この方法はイベントをキャンセルします。つまり、イベントに属するデフォルトのアクションは発生しません。次のように、イベントハンドラーでこの方法を呼び出すことができます:.preventDefault()function(event){ event.preventDefault(); }

jqueryでイベントを要素に一度だけバインドできますか?

はい、jqueryでイベントを要素に一度だけバインドできます。これを実現するには、

メソッドを使用できます。このメソッドは.one()メソッドと同じように機能しますが、イベントハンドラーが1回起動された後、イベントハンドラーが削除されます。たとえば、.on()は、ID「要素」を持つ要素に対して、クリックイベントハンドラーを1回だけトリガーします。 $("#element").one("click", function(){})

以上がjQueryあなたがバインドできるイベントの完全なリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。