バニラJSのイベントターゲティングとjQueryの比較

私はイベントターゲティングの実験を行い、バニラJSとjQueryでその実行を比較しています。私は結果が異なっていたことに驚いた。バニラJSでは成功しましたが、jQueryでは成功しませんでした。私が間違っていないと、jQueryのイベントターゲティングのコードは$(event.target)で、vanilla JSのコードはevent.targetです。私の実験では、<body>タグの中にボタンが1つしかありません。イベントによってターゲットにされているときはいつでも、ブラウザは「ボタン要素はターゲットです」と警告するはずです。そうでなければ「ウィンドウ自体がターゲットになります。しかし、ターゲットの要素がボタンであっても、アラート通知は「ウィンドウ自体がターゲットになっています」のみでした。ここに私のコードです：バニラJSのイベントターゲティングとjQueryの比較

バニラJS

let $ = document.querySelector.bind(document); 

window.onclick = function(event) { 
    if(event.target != $('button')) { 
     alert('window itself is targeted'); 
    } else { 
     alert('button element is targeted'); 
    } 
}

jQueryの

$(window).on('click', function(event) { 
    var $eventTarget = $(event.target); 

    if($eventTarget != $('button')) { 
     alert('window itself is targeted'); 
    } else { 
     alert('button element is targeted'); 
    } 
});

jQueryのコードでは、私は、その実行はバニラJSと同様であるかどうかを確認するためにevent.targetで$(event.target)を交換しようとしました何も変わっていない。それは私のコードの文法で、それが失敗するか、あるいは気づいていない間違ったことがあります。誰かが私にそれを指摘してくれることを願っています。

出典

2016-12-15 jst16

$('button')と$(event.target)は、同じボタンを参照していても同じオブジェクトではありません。

のjQueryを使用して、2つのDOM要素を比較するための正しい方法は、そのタグ/クラス/ IDまたは任意の他の属性

alert($(event.target) == $(event.target)); // false (same target, different jQuery objects) 

alert($('button') == $('button')); // false (same button, different jQuery objects) 

alert($(event.target).is('button')); // true (comparing element tags) 

alert($(event.target).attr('id') == 'buttonId'); // true (comparing element ids) 

alert($(event.target).hasClass('buttonClass')); // true (comparing element classes)

DEMO

出典

2016-12-15 09:32:24

おかげでたくさん:) – jst16

ので、 '（）'メソッドは（あなたは要素のHTMLタグを比較した）その一つの解をjst16 @ソリューション – jst16

です。クラス、ID、またはその他の属性を比較することもできます –

を比較することであるevent.target != $('button')は、いつものようにtrueになりますようごテストは欠陥がありますDOMElementとjQueryオブジェクトを比較していて、オブジェクトを直接比較できないので、$eventTarget != $('button')も常に真です。これはプロパティオブジェクトの比較する修正するには

：

// Native: 
let $ = document.querySelector.bind(document); 
window.addEventListener('click', function(e) { 
    if (e.target.id != $('button').id) { 
     alert('window itself is targeted'); 
    } else { 
     alert('button element is targeted'); 
    } 
});

はonclick()こっちaddEventListener()の好ましい使用を注意してください。

Working native example

// jQuery 
$(window).on('click', function(e) { 
    if (e.target.id != $('button').prop('id')) { 
     alert('window itself is targeted'); 
    } else { 
     alert('button element is targeted'); 
    } 
});

Working jQuery example

出典

2016-12-15 09:33:49

バニラJSのイベントターゲティングとjQueryの比較

答えて

関連する問題