ホームページ > 記事 > ウェブフロントエンド > JQueryイベント委任機構のデリゲートとアンデリゲートの分析例
JQueryイベント委任機構のデリゲートとアンデリゲートの分析例
- 黄舟オリジナル
- 2017-06-26 10:07:281119ブラウズ
次のシナリオを考えてみましょう: 1 p の下に 3 つのボタンがある場合、各ボタンがクリックされたときに、現在のボタンの ID を出力する必要があります。
<p id="parent"> <input type="button" id="a" value="1"></input> <input type="button" id="b" value="2"></input> <input type="button" id="c" value="3"></input> </p>
方法 1: JQuery セレクターを使用して、独自の イベント処理 関数を各ボタンにバインドします。
$("#parent :button").click(function(){
alert($(this).attr("id"));
})
方法 2: イベント委任メカニズムを使用して、イベントをボタンの親要素にのみバインドします。
$("#parent").delegate(":button","click",function(){
alert($(this).attr("id"));
});
delegate この API の関数シグネチャは次のとおりです:
delegate(selector, [type], [data], fn)
selector:
は、イベントをトリガーする要素をフィルターするために使用される JQuery のセレクターを表します。上の親要素の下に 3 つのボタン a、b、c があります。ボタン b をクリックすると、その ID は出力されません。これは、次のコードによって実現できます:
$("#parent").delegate(":button[id!='b']","click",{},function(){
alert($(this).attr("id"));
});type:
スペースで区切られた複数のイベント値を含む、要素に関連付けられた 1 つ以上のイベント。
data
イベント処理関数に渡されるパラメータの値。
$("#parent").delegate(":button","click",{name:123},function(event){
alert(event.data.name);
});fn
イベントの発生時に呼び出されるハンドラー関数。
delegate() には非常に重要なプロパティもあります。delegate() メソッドを使用するイベント ハンドラーは、現在存在する要素、または将来追加される要素に適用できます。
以下のコードでは、テスト ボタンをクリックすると、新しい ボタンが生成され、この新しく生成された ボタン をクリックすると、その ID が出力されます。
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$("#parent").delegate(":button","click",function(event){
alert($(this).attr("id"));
});
$("#test").click(function(event){
$("#parent").append('<input type="button" id="d" value="4"></input>');
});
})
</script>
<body>
<input type="button" id="test" value="test">
<p id="parent">
<input type="button" id="a" value="1"></input>
<input type="button" id="b" value="2"></input>
<input type="button" id="c" value="3"></input>
</p>
</body>
では、delegate() はどのように行うのでしょうか?これは非常に簡単で、javascript のイベント バブリング メカニズムを使用します。子要素がイベントを生成するとき、この イベントの伝播が禁止されていない 場合、親要素もこのイベントを認識します (親要素のイベント ハンドラーが呼び出されます)。そして、Eventオブジェクトを通じて、最初にイベントをトリガーした要素を取得できます。以下のコードでは、簡単なイベント委任メカニズムを独自に実装しました。
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$("#parent").click(":button",function(event){
// target是最初触发事件的DOM元素。
var domId = event.target.id;
// 过滤元素
var filter = event.data;
if($(event.target).is(filter))
{
alert(domId);
}
});
})
</script>
<body>
<p id="parent">
<input type="button" id="a" value="1"></input>
<input type="button" id="b" value="2"></input>
<input type="button" id="c" value="3"></input>
<input type="text" id="d" value="d"></input>
</p>
</body>
delegate と undelegate は、bind と unbind に非常によく似ています。ここで触れておきますが、undelegate を使用してイベントの委任をキャンセルする場合、イベント namespace メカニズムも使用できます。この記事では、バインドとバインド解除を例として、イベント名前空間メカニズムとその詳細な使用方法を紹介します。
以上がJQueryイベント委任機構のデリゲートとアンデリゲートの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。