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>

Jquery - event.target和这个关键字之间的区别？

2 个答案: