如何通过jQuery on.('click')将'this'元素传递给内部函数

Question

如果我有一个像 </p> 这样的元素

<div class='some_class' onclick='executeF(this)'/>

这是否等同于：

$('.some_class').on('click',function(e){
    executeF(this);
});

或者

$('.some_class').on('click',function(e){
    executeF(e);
});

或者

$('.some_class').on('click',function(e){
    executeF($(this));
});

目前我没有测试的手段，所以在继续编码之前，我想确保什么是直接相应的jquery方法（因为我无法立即测试）。

- Fane

Answer 1

$('.some_class').on('click',function(e){
    executeF(e);
});

在上面的代码中，e 代表事件对象。要获取当前的DOM元素，您需要使用 e.currentTarget。

这里的 This 代表触发事件的DOM元素。 $(this) 将给您返回jQuery的元素数组。您可以在以下代码上测试此功能：

function Click(el) {
  console.log(el)
}

$(".some_class").on("click", function(e) {
  console.log("Event: ", e);
  console.log("Current Target of Event: ", e.currentTarget);
  console.log("this: ", this);
  console.log("$(this): ", $(this));
})

div {
  height: 100px;
  width: 100px;
  border: 1px solid silver;
  margin: 10px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div onclick="Click(this)">JS</div>
<div class="some_class">JQuery</div>

希望这有所帮助！

- Rajesh

Answer 2

jQuery中的回调函数被调用，以便this的值是处理事件的DOM元素的引用。因此，您的第一段示例代码是正确的；executeF()函数将传递DOM元素引用。

在委托的情况下：

$(document).on("click", ".some_class", function() {
  // `this` refers to the "some_class" element
});

同样的规则仍然适用：`this`将指向委托目标元素，就像事件处理程序直接与其关联一样。

- Pointy

Answer 3

相当的那个将会是第一个。

$('.some_class').on('click',function(e){
    executeF(this);
});

参数'e'指的是调用该函数的'事件(Event)'。

e.type = 'click'

通过事件的toElement方法，你可以获取到事件发生在哪个元素上，如下所示

e.toElement 

当将'onclick'指定为属性时，"this"总是指' DOMElement'，这意味着'this'的引用被传递为'element'。

- Jas

Answer 4

简短的答案是这样传递的。

  ExecuteF(){ Var elm = $this; Some other code for this function }

$('.some_class').on('click', executeF);

https://api.jquery.com/click/

也许您还想看一下关于侵入式 JavaScript 的帖子

https://dev59.com/y2oy5IYBdhLWcg3wq_7O#8392446

- alphapilgrim

Answer 5

在你实施上述解决方案之前，请确保你理解 e.target 和 e.currentTarget 之间的区别。你可能需要查看 e.target 和 e.currentTarget 的区别。

- Bindrid