简单的javascript来模仿在事件处理程序中使用jQuery行为 [英] Simple javascript to mimic jQuery behaviour of using this in events handlers

问题描述

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

在jQuery中，您可以执行以下操作：

  $（'＃some_link_id'）。click（function（）
 {
 alert（this.tagName）; //显示'A '
}）
  

有人可以一般来解释（不需要你编写代码）他们如何获得将事件的呼叫者html elments（此具体示例中的链接）传递到 关键字？

谢谢！

我很明显地试图在jQuery代码中看到第一，但是我无法理解一行。

更新：
根据Anurag答案我决定在此发布一些代码，因为它似乎比我想象的更容易编码：

  function AddEvent（html_element，event_name，event_function）
 {
 if（html_element.attachEvent）// IE 
 html_element.attachEvent（ on+ event_n ame，function（）{event_function.call（html_element）;}）; 
 else if（html_element.addEventListener）// FF 
 html_element.addEventListener（event_name，event_function，false）; //不需要打电话的伎俩，因为在一切都已经以正确的方式工作
} 
  

然后现在用一个简单的调用我们模仿在事件处理程序中使用这个的jQuery行为

  AddEvent（document。 getElementById（'some_id'），'click'，function（）
 {
 alert（this.tagName）; //显示'A'，它是跨浏览器：同时使用IE和FF 
}）; 
  

你认为有任何错误或我误解的东西吗表面方式？

解决方案

在Javascript中，您可以以编程方式调用函数，并告诉它什么这个应该引用，并使用调用或应用方法在函数中。函数在Javascript中也是一个对象。

jQuery遍历其结果中的每个匹配元素，并调用点击在该对象（在您的示例中）将该元素本身作为上下文或 在该函数内部引用的功能。

例如：

  function alertElementText（）{
 alert（this.text（））; 
} 
  

这将调用上下文（this）对象的文本函数，并提醒它的价值。现在我们可以调用该函数并使上下文（this）成为jQuery包装的元素（所以我们可以直接调用这个而不使用 $（this ）。

 < a id =someA>一些文本< / a> 
 alertElementText.call（$（＃someA））; //应该提醒一些文本
  

使用调用或应用来调用该函数的区别是微妙的。使用调用参数将被原样传递，使用应用，它们将作为数组传递，更多的了解 apply 和 call 。

同样，当调用DOM事件处理程序时，这个已经指向触发的元素事件。 jQuery只是调用你的回调函数并设置元素的上下文。

  document.getElementById（someId）。onclick = function ）{
 //这是指#someId这里
} 
  

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

In jQuery you can do this:

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

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?

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

Thanks!

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         
}

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
}); 

Do you think there are any errors or something I misunderstood taking the all thing in a too superficial way???

解决方案

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 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.

For example:

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

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"

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.

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
}

这篇关于简单的javascript来模仿在事件处理程序中使用jQuery行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！