コードテスト:
コードコピーは次のとおりです。
<div id = "test"> <p>テストテキスト<p> </div>
<スクリプトsrc = "ベンダー/jquery-2.1.1.js"> </scrip>
<スクリプト>
test.addeventlistener( 'click'、function(e){console.log(e);}、false)、
$( '#test')。on( 'click'、function(e){console.log(e)});
</script>
結果分析:
コードコピーは次のとおりです。
js-jq-event-common:{
altkey:false、
泡:本当、
ボタン:0、
キャンセル可能:本当、
ClientX:58、
クライアント:13、
ctrlkey:false、
offsetx:50、
Offsety:5、
Pagex:58、
Pagey:13、
screenx:58、
スクリーン:122、
ビュー:ウィンドウ、
それ:1、
タイプ:「クリック」、
タイムスタンプ:1407761742842、
Metakey:false、
relategTarget:null、
ターゲット:div#test /*jq-evtのターゲットは必ずしもjqueryセレクターに一致する要素ではありません。イベントをキャプチャする最初の要素であり、そのうちの1つがセレクターに一致する要素です* /
}、
js-jq-event-diff:{
currentTarget:null/*通常はnull*/
|| div#test/*jqセレクターは[currentTarget]属性の要素を一致させます*/、
イベント:0 || 2、
Toelement:Div#テスト
}、
JS-Event-Solo:{
X:58、
Y:13、
cancelbubble:false、
Charcode:0、
ClipboardData:未定義、
DatAtransfer:null、
defaultprevented:false、
srcelement:div#test、
fromelement:null、
詳細:1、
キーコード:0、
layerx:58、
レイリー:13、
returnValue:true
}、
JQ-Event-Solo:{
ボタン:未定義、
データ:未定義、
DeLegateTarget:div#test/*誰が聞いていますか?それが要素です。 */、
isdefaultPrevented:function、
handleobj:オブジェクト、
jquery211024030584539286792:真、
OriginalEvent:MouseEvent、
ShiftKey:false
}
Body-Click-Delegate-Event:{
CurrentTarget:htmlbodyElement、
DeLegateTarget:HTMLBodyElement、
ターゲット:htmldivelement
}
要約:
JSのパラメーターでは、ターゲット、Toelement、およびSrcelementであろうと、イベントをトリガーする最初の要素(まだ泡立っていない)を指しています。したがって、多くの要素で親イベントを設定すると、トリガーイベントはこの親の子要素である可能性があります。
したがって、実際のアプリケーションでは、親を参照する場合は、これを使用することしかできません
JQのイベントパラメーターでは、
CurrentTargetは、セレクターに一致する要素であり、これが必要な要素です。
DelegateTargetは、イベントを聴き、委任された要素に属している要素です。
同じJSのイベントパラメーターのターゲットは、イベントをトリガーする最初の要素であり、CurrentTargetほど有用ではありません(たとえば、ボディクリックイベントのアプリケーションなど)
一部の学生は、デバイスイベントの要素を直接参照してこれを使用する必要があると言うかもしれません。なぜCurrentTargetとターゲットを理解するのですか?このアイデアは、Jqueryを使用しているだけで、Backboneなどのツールを使用したことがないことを証明しています。
バックボーンはこれを多くの場所で結合するため、その機能でこれを使用することは不可能です。
コードコピーは次のとおりです。
var view = backbone.view.extend({
EL:document.body、
イベント:{
'Click p' ':' showtext '// Pのクリックイベントを聞くためにボディを配置}、
showtext:function(e){
var p = e.currentTarget; // [currentTarget] selector this.log(p.innerhtml)に一致する要素を取得します。 //私はそれを見ました、これはp要素を指していません}、
log:function(msg){
console.log(msg);
}
});
JSとJQのイベントオブジェクトは似ていますが、まだいくつかの違いがあります。わかりますか?