StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Like <a href="https://stackoverflow.com/users/6521/">Paul Dixon</a> said, you could use <a href="http://msdn.microsoft.com/en-us/library/wt1h2e5c.aspx" rel="nofollow noreferrer">call</a> but I suggest you use <a href="http://msdn.microsoft.com/en-us/library/4zc42wh1(VS.85).aspx" rel="nofollow noreferrer">apply</a> instead.</p> <p>However, the reason I am answering is that I found a disturbing bug: <strong>You are actually replacing all your event handlers with the event handler of the last button.</strong> I don't think that was what you intended, was it? (Hint: You are replacing the value for originalEventHandler in each iteration)</p> <p>In the code below you find a working cross-browser solution: </p> <pre><code>function btnWrap_onClick() { var btns = document.getElementsByTagName("button"); for( var i = 0; i < btns.length; i++) { var btn = btns[i]; // handle wrap button differerntly if( "btnWrap" == btn.id) { btn.disabled = true; continue; // skip this button } // wrap it var newOnClick = function() { alert("Starting event handler"); var src=arguments.callee; src.original.apply(src.source,arguments); alert("Finished event handler"); } newOnClick.original = btn.onclick; // Save original onClick newOnClick.source = btn; // Save source for "this" btn.onclick = newOnClick; //Assign new handler } alert("Buttons wrapped successfully"); } </code></pre> <p>First I create a new anonymous function and store that in the variable <em>newOnClick</em>. Since a function is an object I can create properties on the function object like any other object. I use this to create the property <em>original</em> that is the original onclick-handler, and <em>source</em> that is the source element that will be the <em>this</em> when the original handler is called.</p> <p>Inside the anonymous function I need to get a reference to the function to be able to get the value of the properties <em>original</em> and <em>source</em>. Since the anonymous function don't have a name I use use <a href="http://msdn.microsoft.com/en-us/library/s4esdbwz(VS.85).aspx" rel="nofollow noreferrer">arguments.callee</a> (that has been supported since MSIE5.5) to get that reference and store it in variable src.</p> <p>Then I use the method <em>apply</em> to execute the original onclick handler. <em>apply</em> takes two parameters: the first is going to be the value of <em>this</em>, and the second is an array of arguments. <em>this</em> has to be the element where the original onclick handler was attached to, and that value was saved in <em>source</em>. <em>arguments</em> is an internal property of all functions and hold all the arguments the function was called with (notice that the anonymous function don't have any parameters specified, but if it is called with some parameters anyway, they will be found in the <em>arguments</em> property).</p> <p>The reason I use <em>apply</em> is that I can forward all the arguments that the anonymous function was called with, and this makes this function transparent and cross-browser. (Microsoft put the event in window.event but the other browsers supplies it in the first parameter of the handler call)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload