Jquery - Разница между event.target и этим ключевым словом?

Question

В чем разница между event.target и this?

Допустим, у меня есть

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

Я знаю, что предупреждение будет иметь другое значение. Кто-нибудь может объяснить разницу? Спасибо миллион.

Answer 1

Они будут такими же, если вы нажмете на элемент, к которому подключено событие. Однако, если вы щелкнете по child , и он всплывет, то 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);
});

Он всегда предупреждает ввод дважды, поскольку он является одновременно исходным элементом для события и тем, который его обработал.

1022 *

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 , который фактически нажат.

Однако этот даст ссылку на объект 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>