javascript 如何通过jquery on.('click') 将'this' 元素传递给内部函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34241574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass 'this' element via jquery on.('click') to the inside function
提问by Fane
If I had an element such as
如果我有一个元素，例如
<div class='some_class' onclick='executeF(this)'/>
would this be equivalent to:
这是否相当于：
$('.some_class').on('click',function(e){
executeF(this);
});
or
或者
$('.some_class').on('click',function(e){
executeF(e);
});
or
或者
$('.some_class').on('click',function(e){
executeF($(this));
});
I don't have the means to test this at the moment so I just wanted to make sure what would be the direct correspondent jquery method before going further on my coding since (again) I can't test this right now
我目前没有办法测试这个，所以我只是想在继续我的编码之前确定直接对应的 jquery 方法是什么，因为（再次）我现在无法测试这个
回答by Rajesh
$('.some_class').on('click',function(e){
executeF(e);
});
In above code, estands for event object. To get current DOM element, you will need to use e.currentTarget
在上面的代码中，e代表事件对象。要获取当前的 DOM 元素，您需要使用e.currentTarget
Thishere will represent the DOM element which has triggered event.
This这里将代表触发事件的 DOM 元素。
$(this)will give you jQuery's element array. can
$(this)会给你 jQuery 的元素数组。能够
You can test this on following code:
您可以在以下代码上进行测试：
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>Hope this helps!
希望这可以帮助！
回答by Pointy
Callback functions in jQuery are invoked such that the value of thisis a reference to the DOM element handling the event. Your first bit of sample code is therefore correct; the executeF()function will be passed the DOM element reference.
调用 jQuery 中的回调函数，使得 的值this是对处理事件的 DOM 元素的引用。因此，您的第一部分示例代码是正确的；该executeF()函数将传递 DOM 元素引用。
In the case of delegation:
在委托的情况下：
$(document).on("click", ".some_class", function() {
// `this` refers to the "some_class" element
});
the same still holds: thiswill refer to the delegate target element, as if the event handler were directly associated with it.
仍然如此：this将引用委托目标元素，就好像事件处理程序直接与其关联一样。
回答by Jas
The one which will be the equivalent will be the first one.
将是等价的将是第一个。
$('.some_class').on('click',function(e){
executeF(this);
});
The argument 'e' refers to the 'Event' which invoked the function.
参数“e”指的是调用函数的“事件”。
e.type = 'click'
The toElement method on event can give you back the element on which the event occurred as below
事件上的 toElement 方法可以返回发生事件的元素，如下所示
e.toElement
When a the 'onclick' is assigned as an attribute , "this" always refers to the 'DOMElement' which means the reference of 'this' is passed as an 'element'.
当 'onclick' 被指定为一个属性时，“this”总是指的是 'DOMElement'，这意味着 'this' 的引用是作为一个 'element' 传递的。
回答by alphapilgrim
Short answer would be to pass this like so.
简短的回答是像这样传递这个。
ExecuteF(){ Var elm = $this; Some other code for this function }
$('.some_class').on('click', executeF);
Also might want to take a look at this post about obtrusive js
也可能想看看这篇关于 obtrusive js 的帖子
回答by Bindrid
Before you implement one of the solutions above, be sure you understand the difference between e.target and e.currentTarget. You should probably take a look at Difference between e.target and e.currentTarget
在实施上述解决方案之一之前，请确保您了解 e.target 和 e.currentTarget 之间的区别。您可能应该看看e.target 和 e.currentTarget 之间的差异
