Question

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

在jQuery中你可以这样做：

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

有人可以用一般性的术语解释（不需要你编写代码）他们如何获得将事件的调用者html元素（此特定示例中的链接）传递到 this < / strong>关键字？

我显然试图在jQuery代码中看第一，但我无法理解一行。

谢谢！

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

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 }

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

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

您是否认为有任何错误或我误解的事情以过于肤浅的方式处理所有事情？

Answer 1

在Javascript中，您可以通过编程方式调用函数并告诉它this应引用的内容，并使用call中的apply或Function方法传递一些参数}。函数也是Javascript中的一个对象。

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

例如：

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

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

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

使用call或apply来调用函数之间的区别是微妙的。使用call时，参数将按原样传递，而apply它们将作为数组传递。在MDC上阅读有关apply和call的更多信息。

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

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

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

1 个答案: