简单的 Javascript 来模仿在事件处理程序中使用 this 的 jQuery 行为

2022-01-15 00:00:00 events event-handling javascript this dom-events

这不是关于 jQuery 的问题，而是关于 jQuery 如何实现这种行为的问题.

This is not a question about jQuery, but about how jQuery implements such a behaviour.

在 jQuery 中你可以这样做:

In jQuery you can do this:

$('#some_link_id').click(function() 
{
   alert(this.tagName); //displays 'A'
})

有人可以笼统地解释一下(无需您编写代码)他们如何获得将事件的调用者 html 元素(此特定示例中的链接)传递到 this 关键字?

could someone explain in general terms (no need you to write code) how do they obtain to pass the event's caller html elments (a link in this specific example) into the this keyword?

我显然试图在 jQuery 代码中查看 1st，但我无法理解一行.

I obviously tried to look 1st in jQuery code, but I could not understand one line.

谢谢！

更新:根据 Anurag 的回答，我决定在这一点上发布一些代码，因为它似乎比我想象的更容易编码:

UPDATE: according to Anurag answer I decided to post some code at this point because it seems easier to code than what I thought:

function AddEvent(html_element, event_name, event_function)
{      
   if(html_element.attachEvent) //IE
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);});
   else if(html_element.addEventListener) //FF
      html_element.addEventListener(event_name, event_function, false); //don't need the 'call' trick because in FF everything already works in the right way         
}

然后现在我们通过一个简单的调用来模拟在事件处理程序中使用 this 的 jQuery 行为

and then now with a simple call we mimic jQuery behaviour of using this in events handlers

AddEvent(document.getElementById('some_id'), 'click', function()
{            
   alert(this.tagName); //shows 'A', and it's cross browser: works both IE and FF
});

你认为有什么错误或我误解的东西太肤浅了吗?

推荐答案

在 Javascript 中，您可以通过编程方式调用函数并告诉它 this 应该引用什么，然后使用Function 中的 call 或 apply 方法.函数在 Javascript 中也是一个对象.

In Javascript, you can call a function programmatically and tell it what this should refer to, and pass it some arguments using either the call or apply method in Function. Function is an object too in Javascript.

jQuery 遍历其结果中的每个匹配元素，并调用该对象上的 click 函数(在您的示例中)将元素本身作为上下文或 this指的是该函数内部.

jQuery iterates through every matching element in its results, and calls the click function on that object (in your example) passing the element itself as the context or what this refers to inside that function.

例如:

function alertElementText() {
    alert(this.text());
}

这将调用上下文 (this) 对象上的文本函数，并提醒它的值.现在我们可以调用该函数并将上下文 (this) 设置为 jQuery 包装的元素(这样我们就可以直接调用 this 而无需使用 $(this).

This will call the text function on the context (this) object, and alert it's value. Now we can call the function and make the context (this) to be the jQuery wrapped element (so we can call this directly without using $(this).

<a id="someA">some text</a>
alertElementText.call($("#someA")); // should alert "some text"

使用 call 或 apply 调用函数之间的区别是微妙的.call 参数将按原样传递，而 apply 参数将作为数组传递.阅读更多关于 应用 和 调用 MDC.

The distinction between using call or apply to call the function is subtle. With call the arguments will be passed as they are, and with apply they will be passed as an array. Read up more about apply and call on MDC.

同样，当调用 DOM 事件处理程序时，this 已经指向触发事件的元素.jQuery 只是调用你的回调并将上下文设置为元素.

Likewise when a DOM event handler is called, this already points to the element that triggered the event. jQuery just calls your callback and sets the context to the element.

document.getElementById("someId").onclick = function() {
    // this refers to #someId here
}

相关文章