Jquery - event.target和這個關鍵字之間的區別？

Question

event.target和this之間有什么區別？

讓我說我有

$("test").click(function(e) {
    $thisEventOb = e.target;
    $this = this;
    alert($thisEventObj);
    alert($this);
});

我知道警報會彈出不同的值。 有人可以解釋這個區別嗎？ 太感謝了。

Answer 1

如果您單擊事件所綁定的元素，它們將是相同的。 但是，如果單擊子項並且它出現氣泡，則this引用此處理程序綁定的元素，而e.target仍引用事件源自的元素。

你可以在這里看到不同之處： http ： //jsfiddle.net/qPwu3/1/

鑒於此標記：

<style type="text/css">div { width: 200px; height: 100px; background: #AAAAAA; }​</style>    
<div>
    <input type="text" />
</div>​

如果你有這個：

$("div").click(function(e){
  alert(e.target);
  alert(this);
});

單擊<input>將提示輸入，然后是div，因為輸入發起了事件，div在冒泡時處理它。 但是如果你有這個：

$("input").click(function(e){
  alert(e.target);
  alert(this);
});

它總是會警告輸入兩次，因為它既是事件的原始元素，也是處理事件的原始元素。

Answer 2

事件可以附加到任何元素。 但是，它們也適用於所述對象內的任何元素。

this是事件綁定的元素。 e.target是實際點擊的元素。

例如：

<div>
  <p>
    <strong><span>click me</span></strong>
  </p>
</div>
<script>$("div").click(function(e) {
  // If you click the text "click me":
  // e.target will be the span
  // this will be the div
});  </script>

Answer 3

脆弱的回答

這為您提供了實際附加事件的DOM元素的引用。

event.target為您提供事件發生的DOM元素的引用。

答案很長

 jQuery(document).ready(function(){ jQuery(".outer").click(function(){ var obj = jQuery(event.target); alert(obj.attr("class")); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> Outer div starts here <div class="inner"> Inner div starts here </div> </div> 

當您運行上面的代碼片段時，您將看到event.target正在警告實際單擊的div的類名。

但是， 這將提供綁定click事件的DOM對象的引用。 檢查下面的代碼片段以查看其工作原理，即使單擊內部div，也始終提示綁定click事件的div的類名稱。

 jQuery(document).ready(function(){ jQuery(".outer").click(function(){ var obj = jQuery(this); alert(obj.attr("class")); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> Outer div starts here <div class="inner"> Inner div starts here </div> </div>