jQueryを読むその12：イベントコアの削除method_jquery

.remove は、前の記事で説明した .add の逆のことを行います。また、.add 内の処理コードと 1 対 1 の対応関係があります。つまり、.add にイベントを追加する方法は、対応する削除メソッドと同じ数だけ存在します。

.remove は 4 つのパラメータ elem、types、handler、pos を定義します。文字通り、4 つのパラメーターの意味は非常に明確です

elem は HTMLElement

です

types は String 型で、イベント名は「click」や「mouseover Mouseout」などです

ハンドラー は関数タイプ、イベント コールバック関数

pos は Number 型で、配列の位置

を指定します。

しかし、.remove の内部はそれほど単純ではありません。たとえば、
1 では、ハンドラーはブール型 false を渡すことがあります。その場合、ハンドラーは別の関数に割り当てられます (ここでの処理は .remove と同じです)。追加）。

コードをコピー コードは次のとおりです。

if ( handler === false ) {
handler = returnFalse;
}

2. この場合、実際のハンドラーは types.handler であり、types.type です。

コードをコピー コードは次のとおりです。

// ここでは、types は実際にはイベント オブジェクトです。
if ( tables && tables.type ) {
handler = types.handler;
types = types.type;
}

変数の名前付けは次のようにする必要があることがわかっています。意味があり、その名前にふさわしいものであること。誤解を招くようなものは避けてください。その意味で、jQueryではこのような書き方が多く、変数が複数の意味を持つことが多く、読みにくいです。たとえば、ここでは型は String 型であるはずですが、実際には typeos も内部的には Object 型として処理されます。これは、JS に型チェックがないことが原因で発生します。一方、この言語はより柔軟であり、jQuery は非常にコンパクトでまとまっています。
早速、.remove メソッドの動作を見てみましょう。
1. elem のみを渡した場合、elem に追加されたイベントはすべて削除されます。例: $('#id').unbind()
2. 型が String でピリオド (.) で始まる場合、この名前空間のイベントは削除されます。 $('#id').unbind('.name') など。追加したclick.name、mouseover.name等は削除されます。
対応するコードは次のとおりです

コードをコピーします コードは次のとおりです:

// 要素のすべてのイベントのバインドを解除します
if ( !types || typeof Types === "string" && tables.charAt(0) === "." ) {
types = types || " ";
for ( type in events ) {
jQuery.event.remove( elem, type type );
}
return;
}

We呼び出しの for に再帰があることがわかりました。

jQuery.event.remove(el, 'click', fn)
を呼び出すと、上記の再帰を経由せず、直接 while ループに入ります

コードをコピー コードは次のとおりです:

while ( (type = types[ i ]) ) {
.. .
}

これはイベントを削除するための標準的なプロセスです。おおよその手順は次のとおりです。
1. イベント名に名前空間があるかどうかを確認します (ドットで区切られています)。名前空間がない場合は、イベント名の下にあるすべてのイベントを削除します。それ以外の場合は、ネームスペース内のイベントのみが削除されます。
2. イベント配列を取得します (eventType = events[type])。ハンドラーが渡されない場合は、このタイプのイベントのすべてのハンドラーが削除されます。それ以外の場合は、このイベント タイプの指定されたハンドラーのみが削除されます。
3. 特殊なイベント (ライブなど) の処理
4. 最後に、event が空のオブジェクトの場合は、イベントを削除し、elemData の属性を処理します。たとえば、

コードをコピーします コードは次のとおりです:

// Expando if を削除します。もう使用されません
if ( jQuery.isEmptyObject( events ) ) {
var handle = elemData.handle;
if ( handle ) {
handle.elem = null; >elemData.events を削除;
elemData.handle を削除;
if ( jQuery.isEmptyObject( elemData ) ) {
jQuery.removeData( elem, unknown, true );
🎜>



jQuery イベント管理データ構造図: