ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

WBOY
WBOY転載
2021-12-15 18:34:252307ブラウズ

前の記事「知っておくべきJavaScript最適化の18のヒント」では、JavaScriptのヒントをいくつか紹介しました。この記事では、jqueryイベントをバインドする方法を見てみましょう。バインドの設定と解除に関する関連知識を持つすべての人に役立ちます。

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

#jQuery イベントのバインドとバインド解除

1.1. jQuery イベントの登録

jQuery は、開発者を悩ませる便利なイベント登録機構を提供しますが、操作のメリットとデメリットは次のとおりです。イベントの報道やその他の問題について心配する必要はありません。

欠点: 通常のイベント登録ではイベント委任ができず、イベントのバインド解除もできないため、他の方法が必要です。

#構文

デモ コード

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>
jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

1.2. jQuery イベント処理

通常の登録イベント メソッドの欠点のため、jQuery では複数の処理メソッドが開発されました。重要な点は次のとおりです:

on(): イベント バインディングに使用され、現在最も便利ですイベントのバインドメソッド

  • off(): イベントのバインド解除

  • trigger() /triggerHandler(): イベントトリガー

  • 1.2.1 on() バインディング イベントのイベント処理

通常の登録イベント メソッドの欠点のため、jQuery は複数の新しいイベント バインディング メソッド binding () / を作成しました。 live() / delegate() / on() など、そのうち最も優れているものは次のとおりです: on()Syntax

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

デモ コード

#

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>
    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托(委派)
            // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>
jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

1.2.3. イベント処理 off() アンバインド イベント

イベント上のロジックの特定の When it is要件に応じてイベントのロジックが不要になった場合は、イベントのロジックを削除できます。このプロセスはイベントのバインド解除と呼ばれます。 jQuery は、die() / undelegate() / off() などのさまざまなイベント バインド解除メソッドを提供しており、一度だけトリガーされるイベント バインド メソッド one() もあります。 #構文

デモコード

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
<script>
        $(function() {
  // 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log(&#39;我鼠标经过了&#39;);
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)1.2.4. イベント処理trigger()は自動的にイベントをトリガーします

場合によっては、特定の特定の条件下では、カルーセル画像の自動再生機能が右側のボタンのクリックと一致するなど、特定のイベントが自動的にトリガーされることが望ましいと考えられます。タイマーを使用すると、マウスをクリックしなくても、右ボタンのクリック イベントを自動的にトリガーできます。この jQuery から、2 つの自動トリガー イベントtrigger() とtriggerHandler()が提供されます。

Syntax

デモ コード

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });
      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点,一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)1.3. jQuery イベント オブジェクト

jQuery は、互換性が高く、取得が容易で、使用方法がほとんど変更されないように、DOM 内のイベント オブジェクト イベントをカプセル化します。イベントがトリガーされると、イベント オブジェクトが生成されます。

構文

デモ コード

<body>
    <div></div>
<script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注: jQuery のイベント オブジェクトは、API および DOM のイベントからの参照として使用できます。 。 jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)

1.4. jQuery コピー オブジェクト

jQuery は、要素のサイズと位置をすばやく取得および設定するための 2 つの API セットを提供しており、便利で使いやすいです。 . 内容は以下の通りです。

構文

デモ コード

 <script>
        $(function() {
   // 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
   // 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)1.5. jQuery の複数ライブラリの共存

実際の開発においては、10年以上継続して開発されているプロジェクトが多く、jQueryのバージョンが常に更新されているため、初期のjQueryのバージョンではニーズに対応できず、新たな機能を確実に新しいjQueryで実装する必要がある古いバージョンは正常に動作しますが、この状況を複数の jQuery ライブラリの共存と呼びます。

文法

デモ コード

<script>
$(function() {
  // 让jquery 释放对$ 控制权 让用自己决定
  var suibian = jQuery.noConflict();
  console.log(suibian("span"));
})
</script>

関連ビデオ チュートリアルの推奨事項: jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)jQuery ビデオ チュートリアル

以上がjqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。