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

...
ディスパッチ = 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 メソッドは使用されません。全て。別のメカニズムを使用します。

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 オブジェクトの最初の要素のみを操作します。次のように

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


さて、jQuery.event.trigger



コードをコピーします

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




コードをコピーします

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




コードをコピー

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


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

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

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

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 (イベント名前空間) で使用できることに注意してください。
次は


コードをコピーします

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

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