jqueryイベントプロキシとはどういう意味ですか?-フロントエンドQ&A-php.cn

jqueryイベントプロキシとはどういう意味ですか?

WBOY

リリース： 2022-06-17 17:11:23

オリジナル

1665 人が閲覧しました

jquery では、イベントプロキシとは、イベントを親要素にバインドし、DOM を介してイベントが要素にバブリングされてから実行されるのを待つことを意味します。イベントプロキシは、イベントバブリングの原理を使用してイベントを送信します。親に追加すると、イベントのソースを特定し、対応する子要素に対して操作を実行することで、イベントバインディングの数が大幅に削減され、パフォーマンスが向上します。

jqueryイベントプロキシとはどういう意味ですか?

このチュートリアルの動作環境: Windows10 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jQuery イベントプロキシの意味は何ですか。

jQuery では、イベントプロキシとは、イベントを親要素にバインドし、イベントが DOM を通じて要素にバインドされるまで待機することを意味します。それを実行しています。

イベントプロキシは、イベントバブリングの原理を使用し (イベントバブリングとは、イベントがレベルごとに親に渡されることを意味します)、イベントを親に追加し、イベントのソースを判断して対応するアクションを実行します。子要素に対する操作の場合、イベントプロキシにより、まずイベントバインディングの数が大幅に削減され、パフォーマンスが向上します。次に、新しく追加された子要素に同じ操作を実行できるようになります。

イベントリスニングプロセス中にイベントをトリガーするには、イベントキャプチャとイベントバブリングという 2 つの方法があります。イベントはより速く、より効率的に発生します。

イベントキャプチャ: イベントは DOM 内の子孫要素にシンクされます。

イベントバブリング: イベントは、イベントが発生したソース要素から DOM を通じてバブルアップします。

jQuery はイベントバブリングを使用してすべてのイベントを処理します。 jQuery ライブラリには、要素のイベント処理関数をバインドするための 3 つのメソッド、つまり、bind()、live()、および delegate() が提供されます。

1. .bind() を使用してイベント処理関数をバインドします: 2 つのパラメーターを指定する必要があり、1 つ目はイベントタイプ、2 つ目はイベント処理関数です。

.bind(event type,event handle)

例:

$(document).ready(function(){
　　$(".selector").bind("click",alertMe);
function alertMe(){
　　alert("Hello world!");
}
});

ログイン後にコピー

.bind() メソッドは、既に存在する要素にイベントハンドラーをバインドする場合にのみ適しています。ドム。これは、アクションスクリプトを通過するときに後で追加される DOM 要素には影響しません。

想像してみてください: DOM に .box 要素があります。クリックされるたびにこの要素をコピーして DOM に追加するリンクが必要だとします。まず、適切なクリックイベントハンドラーをこのリンクにバインドできます。このリンクをクリックするたびに、.clone() メソッドが 1 回呼び出され、ボックス要素をコピーして、対応するコンテナに追加します。

$(document).ready(function(){
    $(&#39;.box&#39;).bind(&#39;click&#39;,function(){
        $(this).clone().appendTo(&#39;.container&#39;);        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

ログイン後にコピー

ブラウザで実行すると、これをクリックしたときの結果が表示されます。リンク、要素を追加します。ただし、最初のリンク以外の要素をクリックした場合、クリックイベントは実行されません。

したがって、バインドされたクリックイベントは、DOM に追加されたばかりのこれらの新しい要素には作用できません。イベントをバインドする時点で DOM に存在する要素のみが、クリックイベントを正常にバインドします。クリックイベントは最初の要素にのみバインドされているため、最初の要素を継続的に複製できますが、複製された要素はいずれもクリックイベントの影響を受けることはありません。この複製された要素がクリックイベントの影響を受けるようにしたい場合は、.live() バインディングを使用できます。

2. .live() を使用してイベント処理関数をバインドする

.live() メソッドは、イベントをキャプチャするための非常に柔軟な方法を提供します。その使用法は .bind() と非常に似ています。唯一の違いは、.live() メソッドは現在 DOM に存在する要素だけでなく、将来存在する可能性のある要素 (動的に生成される) にも機能することです。

.live(event type,event handle)

上記の例を変更します:

$(document).ready(function(){
    $(&#39;.box&#39;).live(&#39;click&#39;,function(){
        $(this).clone().appendTo(&#39;.container&#39;);        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

ログイン後にコピー

3. .delegate() を使用してイベント処理関数をバインドします

.delegate(selector,eventtype,eventhandler)

上記の例を変更します:

<script type="text/javascript">
  
  $(document).ready(function(){
        $(&#39;.container&#39;).delegate(&#39;.box&#39;,&#39;click&#39;,function(){
            $(this).clone().appendTo(&#39;.container:first&#39;);        
        });
    });    
  </script>
  <body>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
  </body>

ログイン後にコピー

実行効果は、.live() を使用してイベント処理関数をバインドするのと同じです。ただし、.delegate() を使用してイベント処理関数をバインドする方が、.live() を使用するより効率的です。バインディングに関連する jQuery ライブラリのソースコードの一部

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },
    live: function( types, data, fn ) {
        alert(this.context); //添加一行
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },
    delegate: function( selector, types, data, fn ) {
        alert(this); //添加一行
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
    },

ログイン後にコピー

では、ライブメソッドとデリゲートメソッドにそれぞれ行が追加されます。ブラウザの実行後、.live() を使用すると、ドキュメントがポップアップします。 .live() を使用して、ソースがドキュメントである特定のイベントをバインドすることを意味します。 .delegate() を使用すると、オブジェクトがポップアップします。つまり、 .delegate() を使用してイベントをバインドすると、そのソースは特定のバインドされた要素になります。したがって、.delegate() を使用する方が、.live() を使用するよりも効率的です。

ソースコードからわかるように、.bind() を使用してイベント処理関数をバインドし、unbind() を使用してイベントバインディングをキャンセルします。

.live() を使用してイベント処理関数をバインドし、die() を使用してイベントバインディングをキャンセルします。

.delegate() を使用してイベント処理関数をバインドし、undelegate() を使用してイベントバインディングをキャンセルします。

ビデオチュートリアルの推奨: jQuery ビデオチュートリアル

以上がjqueryイベントプロキシとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。