将值传递给JavaScript中的函数

Question

假设我有一些HTML锚元素，并且我想为每个元素设置一个处理程序。

window.onload = function() {
    // I select all of the anchors
    var myAnchors = document.querySelectorAll("a");

    // I iterate through the anchors and set a handler to each of them
    for (var i = 0; i < myAnchors.length; i++) {
        myAnchors[i].onclick = handleControl;
    }
}

function handleControl(e) {
    var id = e.target.getAttribute("id");
}

我不明白如何设置处理程序将参数传递给handleControl函数。 换句话说， myAnchors[i].onclick = handleControl; 将值e传递给处理程序？

我从JavaScript编程书中获得了这段代码。

Answer 1

没有。 基本上，您说的是在某个时间点值可用时应使用什么功能。 因此，例如，您要说的是，单击链接时，应handleControl您指定的函数handleControl 。 参数e由浏览器传递给它，它表示有关click事件的信息。

所以想像一下：

1. 浏览器检测到对链接的单击
2. 它创建一个“事件对象”，其中包含有关事件的信息
3. 它调用以“事件对象”作为参数指定的处理函数。 您可以想象它会执行类似于anchor.onclick(event_info) ，其中event_info对应于handleControl上的e参数。

请记住，这不一定完全是正在发生的事情，但是回答您的问题的关键是该参数来自其他位置（在本例中为浏览器），并传递给您指定的函数的调用。

Answer 2

相信您只是想知道如何？

用外行的话来说：

1. 嗨，我是一个元素，你可以点击我
2. 好的，当我单击您时，我希望执行handleControl函数，在此您获得了对该函数的引用。
3. 谢谢
4. 用户点击
5. 好家伙！ 我被点击了，看看我的onclick属性上是否有函数引用
6. 是的..是的，我愿意！ 好吧，让我启动此功能并在执行此操作时提供一些事件信息
7. 调用this.onclick(e); 其中e是Event对象， this.onclick对处理函数的引用

如果这不是您要的，我会感到很愚蠢，您可以忽略此；）

Answer 3

您的问题是设置处理程序如何将参数传递给handleControl函数。 换句话说， myAnchors[i].onclick = handleControl; 将值e传递给处理程序？

因此， onClick事件将触发一个功能：

function(e) {
   // Whatever you want to do with clicked 'anchor' e, do it here
}

在内部，你会得到点击的锚对象e这里。

在您的示例中，函数

function handleControl(e) {
    var id = e.target.getAttribute("id");
}

一样。

Answer 4

所以当你这样做

   myAnchors[i].onclick = handleControl;

您实际上是在向myAnchors [i]元素的click事件注册一个回调函数。
浏览器的dom引擎跟踪每个dom元素的每个事件的所有回调。 现在，当元素发生事件时，dom引擎将调用与该元素和该事件对应的所有回调。 但它使用事件对象的参数进行调用。

Answer 5

在这里， handleControl函数已订阅DOM元素。
因此，如果从DOM触发任何点击事件，则事件信息e将传递给订阅的方法。