jQuery No. 14 (イベントをトリガーするコアメソッド)_jquery を読む

「イベント モジュールの進化」では、イベントをアクティブにトリガーするために、dispatchEvent (標準) と fireEvent (IE) を使用しました。次のように

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

...
ディスパッチ = w3c ?
function(el, type){
try{
var evt = document.createEvent('Event');
evt.initEvent(type,true,true); >el.dispatchEvent( evt);
}catch(e){alert(e)};
} :
function(el, type){
try{
el.fireEvent( 'on' タイプ) ;
}catch(e){alert(e)}
};


jQuery では、dispatchEvent/fireEvent メソッドは使用されません。全て。別のメカニズムを使用します。

jQuery がイベントをトリガーする中心的なメソッドは、jQuery.event.trigger です。クライアント プログラマー向けに 2 つのトリガー イベント メソッドが提供されます。 .trigger/.triggerHandler


一部の要素でイベントが発生すると、2 つのアクションが発生する可能性があります。1 つはデフォルトの動作、もう 1 つはイベント ハンドラーです。たとえば、リンク A Sina Mail をクリックした後、1ポップアップ (イベント ハンドラー) が表示されたら、[OK] をクリックして mail.sina.com.cn にジャンプします (デフォルトの動作)。したがって、イベントをトリガーするように設計された関数は、これら 2 つの状況を考慮する必要があります。
jQuery は、.trigger と .triggerHandler を使用して、次の 2 つの状況を区別します。
.trigger はイベント ハンドラーを実行する/バブリングを実行する/デフォルトの動作を実行する
.triggerHandler はイベント ハンドラーを実行する/バブルしない/しないデフォルトの動作を実行します

コードをコピー コードは次のとおりです: のソース コード。 trigger/.triggerHandlerは以下の通りです

trigger : function( type, data ) {

return this.each(function() {
jQuery.event.trigger( type, data, this );
});
},
triggerHandler: function( type, data ) {
if ( this[0] ) {
return jQuery.event.trigger( type, data, this[0], true );
}
} 、


どちらも jQuery.event.trigger を呼び出していることがわかります。呼び出し時に、一方は true を渡しませんでしたが、もう一方は true を渡しました。 true triggerHander を渡すと、イベント ハンドラーのみが実行されることを意味します。
さらに、注意すべき違いが 1 つあります。.trigger は jQuery オブジェクトのコレクションを操作しますが、.triggerHandler は jQuery オブジェクトの最初の要素のみを操作します。次のように

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

p1< /p>

p1

<script> alert(1)} ); <br>$('p').trigger('click'); // 3 回再生します。つまり、3 つの p のクリックがトリガーされます。 、最初の p のクリックのみをトリガーします <br></script>


さて、jQuery.event.trigger



コードをコピーします

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

trigger: function(event, data, elem,onlyHandlers ) { // Eventオブジェクトまたはイベントのタイプ var type =event.type || イベント、namespaces = []、....

}

これは jQuery.event.trigger の定義の大部分を省略したものです。以下にリストされているのは




コードをコピーします

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

if ( type.indexOf ("! ") >= 0 ) { // 排他的イベントは、正確なイベントに対してのみトリガーされます (名前空間なし) type = type.slice(0, -1); exclusive = true; }

この段落は、.trigger('click!') の状況、つまり非名前空間イベントのトリガーを処理します。変数 exclusive は、イベント オブジェクトでハングされた後、jQuery.event.handle 内で使用されます。たとえば、




コードをコピー

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

function fn1() { console .log(1) } function fn2() { console.log(2) }

$(document).bind('click.a', fn1) ;

$(document).bind('click', fn2);
$(document).trigger('click!'); // 2


2 つのクリック イベントをドキュメントに追加しました。1 つは名前空間 "click.a" を持ち、もう 1 つは "click" を持ちません。トリガーを使用する場合は、クリックパラメータの後に感嘆符「!」を追加します。 2の出力結果から、名前空間のイベントがトリガーされていないことがわかります。要約すると:
.trigger('click') はすべてのクリック イベントをトリガーします
.trigger('click.a') は「click.a」のクリック イベントのみをトリガーします
.trigger('click!' ) 非名前空間クリック イベントをトリガーします
次に、

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

if ( type.indexOf(".") >= 0 ) {
// handle() のイベント タイプに一致する名前空間トリガーを作成します。
namespaces = type.split(" .");
type = namespaces.shift();
namespaces.sort();
}

この段落は理解しやすいです。 'click.a ') 処理、つまり、名前空間を使用したイベントの処理。
次に、

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

if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) {
// このイベント タイプには jQuery ハンドラーがなく、インライン ハンドラーを持つことはできません
return;
}

「getData」などの一部の特別なイベント、またはトリガーされたイベントに対して直接戻ります。
下に進みます

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

event = typeofイベント === "オブジェクト" ?
// jQuery.Event オブジェクト
event[ jQuery.expando ] ? イベント :
// オブジェクト リテラル
new jQuery.Event( type,event ) :
// イベントのタイプ (文字列) のみ
new jQuery.Event( type );

3 つの状況があります
、イベント自体は jQuery.Event クラスのインスタンスです
、イベントは通常の JS オブジェクト (jQuery.Event クラスのインスタンスではありません)
、イベントは "click" などの文字列です
続きます
event.type = type;イベント.exclusive = 排他的;
event.namespace = namespaces.join(".");
event.namespace_re = new RegExp("(^|\.)" namespaces.join("\.(?: .*\.)?") "( \.|$)");
exclusive/namespace/namespace_re はイベントにリンクされており、jQuery.event.handle (イベント名前空間) で使用できることに注意してください。
次は

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

//triggerHandler () およびグローバル イベントは、デフォルトのアクションをバブルしたり実行したりしません。 >

onlyHandlers は .triggerHandler でのみ使用されます。つまり、要素のデフォルトの動作をトリガーせず、バブリングを停止します。
次は

コードをコピーします

コードは次のとおりです: // ハンドルグローバル トリガー if ( !elem ) { // TODO: データ キャッシュの挑発を停止し、グローバル イベントを削除し、常にドキュメントにアタッチします。 jQuery.each( jQuery.cache, function() { // innerKey 変数は、

// を見つけやすくするために使用されるだけであり、後でこの要素を変更する可能性があります。現在は

// jQuery.expando を指すだけです
var innerKey = jQuery.expando,
internalCache = this[internalKey ];
if (internalCache && externalCache.events && innerCache.events[type ] ) {
jQuery.event.trigger(event, data, externalCache.handle.elem ); >}
});
return;
}


これは再帰呼び出しです。 elem 要素が渡されない場合は、jQuery.cache から取得されます。
続いて




コードをコピー

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

// Don'テキストノードとコメントノードでイベントを実行します if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; Attribute 、テキストノード 直接戻ります。

次はコードのコピーです

コードのコピー

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

// 受信データのクローンを作成し、ハンドラー引数リストを作成します。 data = data != null ? jQuery.makeArray( data ) : []; data.unshift(event); 🎜>
まずパラメータデータを配列に入れ、イベントオブジェクトを配列の最初の位置に置きます。
続いて

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

// イベントを起動します現在の要素に対して DOM ツリーをバブルアップします。
do {
var handle = jQuery._data( cur, "handle" );
event.currentTarget = cur;
handle.apply( cur, data );
}
// インライン バインド スクリプトをトリガーします
if ( ontype && jQuery.acceptData( cur ) && cur[ ontype ] && cur[ ontype ]. apply( cur , data ) === false ) {
event.result = false;
}
// ドキュメントにバブルアップしてからウィンドウにバブルアップします
cur = cur .parentNode || cur.ownerDocument || cur === events.target.ownerDocument && window; while ( cur && !event.isPropagationStopped() );コードは非常に重要です。次のことを実行します。
、ハンドルを取得
、実行
、onXXX を通じて追加されたイベント (onclick="fun()" など) を実行
、親要素を取得

while ループ これらの 4 つの手順を繰り返して、イベントのバブリングをシミュレートします。ウィンドウオブジェクトまで。
次は




コードをコピーします

コードは次のとおりです: // If誰もデフォルトのアクションを妨げていません。今すぐ実行してください。 if ( !event.isDefaultPrevented() ) { var old, special = jQuery.event.special[ type ] ||

if ( (!special._default ||special._default.call(elem.ownerDocument,event)===false)&&

!(type === "click" && jQuery.nodeName(elem, "a" )) && jQuery. acceptData( elem ) ) {
// イベントと同じ名前のターゲットでネイティブ DOM メソッドを呼び出します。
// IE6 のため、ここでは .isFunction)() チェックを使用できません。 /7 はテストに失敗します。
// IE<9 は非表示要素 (#1486) にフォーカスすると終了します。
try {
if ( ontype && elem[ type ]) ) {
// FOO() メソッドを呼び出すときに onFOO イベントを再トリガーしない
old = elem[ ontype ];
if ( old ) {
elem[ ontype ] = null;
}
jQuery.event.triggered = type;
elem[ type ]();
} catch ( ieError ) {}
if (old ) 🎜>elem [ ontype ] = old;
}
jQuery.event.triggered = unknown;
}
}


このセクションはブラウザのデフォルトのトリガーです行動。 form.submit()、button.click() など。
Firefox のリンクのセキュリティ制限により、リンクに対する jQuery のデフォルトの動作はトリガーされないように統一されていることに注意してください。つまり、.trigger() を介してリンクをジャンプすることはできません。