Cache objects for onclick in javascript

Question

Is there a reason to cache myId like below (let's say the object myId will only be used for this popup function, nowhere else in the JavaScript).

var myId = document.getElementById('myId');
myId.onclick = function () {
  alert('button was clicked');
}

I figure that the onclick event will only be set once and that it is unnecessary. But I'm not sure.

Answer 1

The only reason to cache would be if you would want to use the myid element for more than just binding the click event .

One often caches elements for just that reason, which saves performance because you dont have to search the DOM tree more than once.

Answer 2

通常，最好将元素缓存一次，直到您可能会再次使用它，但是如果您确定不需要再次访问它，则没有理由将其保存以供以后使用。

Answer 3

You're just assigning a variable that could possibly conflict with another down the track. If you're only setting the callback once, just do it like this:

document.getElementById('myId').onclick = function () {
    alert('button was clicked');
}