[英]Passing a value to a function in JavaScript
Say I have some HTML anchor elements and I would like to set a handler for each of them. 假设我有一些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");
}
I'm unable to understand how setting an handler passes an argument to the handleControl
function. 我不明白如何设置处理程序将参数传递给handleControl
函数。 In other words, how does myAnchors[i].onclick = handleControl;
换句话说, myAnchors[i].onclick = handleControl;
pass a value e
to the handler? 将值e
传递给处理程序?
I got this code from a JavaScript programming book. 我从JavaScript编程书中获得了这段代码。
It doesn't. 没有。 Basically you're saying what function should be used when, at some point in time, a value becomes available. 基本上,您说的是在某个时间点值可用时应使用什么功能。 So for example, there you're saying that when the link is clicked, the function you specified, handleControl
, should be called. 因此,例如,您要说的是,单击链接时,应handleControl
您指定的函数handleControl
。 The parameter e
is passed to it by the browser, which represents information about the click event. 参数e
由浏览器传递给它,它表示有关click事件的信息。
So think of it like: 所以想像一下:
anchor.onclick(event_info)
, where event_info
corresponds to the e
parameter you have on handleControl
. 您可以想象它会执行类似于anchor.onclick(event_info)
,其中event_info
对应于handleControl
上的e
参数。 Keep in mind, this isn't necessarily exactly what's happening, but the point to answer your question is that the parameter comes from elsewhere (in this case, the browser), and is passed to an invocation of the function you specify. 请记住,这不一定完全是正在发生的事情,但是回答您的问题的关键是该参数来自其他位置(在本例中为浏览器),并传递给您指定的函数的调用。
I believe you just want to know the how? 相信您只是想知道如何?
In layman terms: 用外行的话来说:
handleControl
to be executed, here you got a reference to that function. 好的,当我单击您时,我希望执行handleControl
函数,在此您获得了对该函数的引用。 onclick
attribute 我被点击了,看看我的onclick
属性上是否有函数引用 this.onclick(e);
调用this.onclick(e);
with e
being an Event
object, and this.onclick
the reference to the handler function 其中e
是Event
对象, this.onclick
对处理函数的引用 If this is not what you asked for, i feel stupid and you can ignore this ;) 如果这不是您要的,我会感到很愚蠢,您可以忽略此;)
Your question is how setting an handler passes an argument to the handleControl function. 您的问题是设置处理程序如何将参数传递给handleControl函数。 In other words, how does myAnchors[i].onclick = handleControl;
换句话说, myAnchors[i].onclick = handleControl;
pass a value e
to the handler? 将值e
传递给处理程序?
So, onClick
event will trigger one function: 因此, onClick
事件将触发一个功能:
function(e) {
// Whatever you want to do with clicked 'anchor' e, do it here
}
Internally you will get the clicked anchor object as e
here. 在内部,你会得到点击的锚对象e
这里。
In your example the function 在您的示例中,函数
function handleControl(e) {
var id = e.target.getAttribute("id");
}
does the same. 一样。
So when you do 所以当你这样做
myAnchors[i].onclick = handleControl;
You are actually registering a callback function to myAnchors[i] element's click event. 您实际上是在向myAnchors [i]元素的click事件注册一个回调函数。
The dom engine of the browser keeps track of all the callbacks for each event for each dom element. 浏览器的dom引擎跟踪每个dom元素的每个事件的所有回调。 Now when an event occurs for element, then dom engine calls all the callbacks corresponding to the element and that event. 现在,当元素发生事件时,dom引擎将调用与该元素和该事件对应的所有回调。 But it calls with a parameter which is event object. 但它使用事件对象的参数进行调用。
Here the function handleControl
is subscribed to the DOM Element. 在这里, handleControl
函数已订阅DOM元素。
So if any click event triggers from DOM, the Event Info e will get passed to the subscribed method. 因此,如果从DOM触发任何点击事件,则事件信息e将传递给订阅的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.