JSのイベントオブジェクトとJQ_javascriptスキルの違いの分析

コードテスト:

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

テストテキスト

<スクリプト src="vendor/jquery-2.1.1.js"> <スクリプト>
test.addEventListener('click', function(e){console.log(e);}, false),
$('#test').on('click', function(e){console.log(e)});

結果分析:

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

js-jq-event-common:{

altKey: false、
泡: true、
ボタン: 0、
キャンセル可能: true、
clientX: 58、
clientY: 13、
ctrlキー: false、
オフセットX: 50、
オフセットY: 5、
ページX: 58、
ページY: 13、
スクリーンX: 58、
スクリーンY: 122、
ビュー: ウィンドウ、
どれ: 1、
入力: 'クリック'、
タイムスタンプ: 1407761742842、
メタキー: false、
関連ターゲット: null、
target: div#test /* jq-evt のターゲットは、jQuery セレクターによって一致する要素である必要はありません。イベントをキャプチャする最初の要素である可能性があり、その後、バブルが発生すると要素の 1 つが要素になります。セレクター*/
によって一致 }、
js-jq-event-diff:{
currentTarget: null/*一般的に null のようです*/
|| div#test/*jq セレクターによって一致する要素は [currentTarget] 属性内にあります*/,
イベントフェーズ: 0 || 2、
toElement: div#test
}、
js-event-solo:{
x: 58、
y: 13、
cancelBubble: false、
文字コード: 0、
クリップボードデータ: 未定義、
dataTransfer: null、
デフォルトの防止: false、
src要素: div#test、
fromElement: null、
詳細: 1、
キーコード: 0、
レイヤーX: 58、
レイヤーY: 13、
戻り値: true
}、
jq-event-solo: {
ボタン: 未定義、
データ: 未定義、
delegateTarget: div#test/*誰が聞いていますか?これが要素です。 */、
isDefaultPrevented: 関数、
handleObj: オブジェクト、
jQuery211024030584539286792: true、
オリジナルイベント: MouseEvent、
シフトキー: false
}
body-click-delegate-event: {
currentTarget: HTMLBodyElement、
delegateTarget: HTMLBodyElement、
ターゲット: HTMLDivElement
}

概要:

JS のイベント パラメーターでは、target、toElement、srcElement のいずれであっても、それらはすべてイベントをトリガーする最初の要素 (まだバブルされていません) を指しており、クリック イベントでは fromElement は null です。要素の親コンテナーの親イベントを多数含めるように設定すると、イベントはこの親の子要素によってトリガーされる可能性があります。

したがって、実際のアプリケーションでは、親を参照したい場合は、これを使用するしかありません

jqのeventパラメータに
currentTarget はセレクターに一致する要素、つまり必要な要素です。 delegateTarget はイベントをリッスンし、委任された要素
に属する要素です。 ターゲットは、js のイベント パラメーターのターゲットと同じです。イベントをトリガーする最初の要素です (bodyclick イベント内のアプリケーションなど、必ずしも必要ではありません)。 デバイスイベントの対象となる要素を直接参照したい場合は、わざわざ currentTarget と target を理解する必要があるのではないかと言う学生もいるかもしれません。この考え方は、jQuery を使用しているだけで、Backbone のようなツールを使用したことがないことを証明します。

バックボーンはこれを多くの場所でバインドしているため、これをその関数で使用することはできません:

コードをコピーします

コードは次のとおりです: var view = Backbone.View.extend({ エル: document.body、

イベント: {

'click p': 'showText' // p のクリック イベントを監視するデリゲート本体 },
showText: function(e){
var p = e.currentTarget; // [currentTarget] セレクターによって一致する要素を取得します this.log(p.innerHTML) // ご覧のとおり、これは p 要素を指しません },
ログ: function(msg){
コンソール.ログ(メッセージ); }
});

JS と JQ のイベント オブジェクトは似ていますが、それでもいくつかの違いがあります。