Error in IE when manually calling event handler, given certain conditions

Question

Preface

• Please note, I'm not looking for a code solution, but rather insight into why this may occur.
• The error occurs in IE (tested 7 & 8), but not Firefox, Chrome, Safari.

Description

When manually calling a function assigned to onclick, IE with throw a Error: Object doesn't support this action if all of the following conditions are met:

1. You call the method directly via the element's on[event] property.
2. You do not use .call() or .apply().
3. You pass an argument (any argument, even undefined).
4. You attempt to assign the return value to a variable.

Violate any one of those rules, and the call succeeds.

The function itself appears to have nothing to do with it. An empty function gives the same result.

Code

var elem = document.getElementById('test');  // simple div element.
var result;               // store result returned.

function test_func(){};   // function declaration.
                          // function expression behaves identically.

elem.onclick = test_func; // assign test_func to element's onclick.

// DIRECT CALL
test_func();                 // works
test_func( true );           // works
result = test_func();        // works
result = test_func( true );  // works

// DIRECT CALL, CHANGING THE CONTEXT TO THE ELEMENT
test_func.call( elem );                  // works
test_func.call( elem, true );            // works
result = test_func.call( elem );         // works
result = test_func.call( elem, true );   // works ******** (surprising)

// CALL VIA ELEMENT, USING .call() METHOD, CHANGING THE CONTEXT TO THE ELEMENT
elem.onclick.call( elem );                  // works
elem.onclick.call( elem, true );            // works
result = elem.onclick.call( elem );         // works
result = elem.onclick.call( elem, true );   // works ******** ( very surprising)

// CALL VIA ELEMENT
elem.onclick();                 // works
elem.onclick( true );           // works
result = elem.onclick();        // works
result = elem.onclick( true );  // Error: Object doesn't support this action

Summary

Again, I don't need a code solution. Rather I'm curious if anyone has insight into why IE is implemented this way.

Many thanks.

---

EDIT: To clarify one thing, nothing with the actual function seems to make any difference. Naming parameters, not naming them, returning the argument, returning a literal value, returning undefined, all of these have no effect.

This is likely because the function seems to never actually get called. As I noted in a comment below, the code leading up to this call runs fine, so it isn't a parsing issue either. But when the interpreter gets to this one, it sees:

Variable + AssignmentOperator + DOMElement + EventHandler + CallOperator + Argument

...and throws the Error. No manipulation I do seems to make any difference. A valid removal of any one of those, and the Error disappears.

If I place add a variable to the middle of it that stores the handler, then fire it from the variable it works.

var temp = elem.onclick;
result = temp( true );    // works

...but this shouldn't be much of a surprise, since it is effectively the same as the fourth version above.

Answer 1

As to "why" it was implemented this way, there's probably no answer from the outside. A good example is when former IE developer, the inventor of innerHTML, faces problems with innerHTML itself.

Asking why is also unnecessary because

1. You don't often call event handlers with parameters explicitly
2. You can work around the issue (as you stated in your question)

Another thing to note is that your analogy is too specific. The issue is not restricted to the assignment expression, you can reproduce it with other types of expressions:

undefined === elem.onclick( true )
typeof elem.onclick( true )
elem.onclick( true ) - 1
alert(elem.onclick( true ))