jqueryでイベントをバインドおよびバインド解除する方法は? (詳しいコード説明)-jsチュートリアル-php.cn

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

WBOY

リリース： 2021-12-15 18:34:25

転載

2305 人が閲覧しました

前の記事「知っておくべき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>

ログイン後にコピー

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 サイトの他の関連記事を参照してください。