How to pass/escape an argument to an event handler attached using Javascript?

Question

In the code HTML+Script below,

an event handler is attached after page load using setAttribute(...).
The event handler is passed an argument which is read dynamically too.
the event handler is attached successfully ( verified by a getAttribute(...)

However, the handler does not fire.

What is wrong with the snippet below?

<HTML>
 <BODY onload="loader();">
   <table>
        <tbody>
            <tr>
                <td id="myId">FirstColumn</td>
                <td id="otherId">SecondColumn</td>
                <td id="lastId">Balderdash</td>
            </tr>
        </tbody>
   </table>
 </BODY>
 <script language="javascript">
    function loader(){
        
    document.getElementById('myId').setAttribute('onmouseover','showMessage("'+document.getElementById('otherId').innerHTML+'");');
    alert(document.getElementById('myId').getAttribute('onmouseover'));

    document.getElementById('myId').setAttribute('onmouseout','alert(\"'+document.getElementById('otherId').innerHTML+'\");');
    alert(document.getElementById('myId').getAttribute('onmouseout'));
    document.getElementById('lastId').setAttribute('onmouseout','alert("hohoho");');
    
    alert(document.getElementById('lastId').getAttribute('onmouseout'));
    function showMessage( aMessage ){
        alert(aMessage);
    }
 </script>
</HTML>

Tim Down · Accepted Answer · 2009-10-02 08:43:06Z

1

Do not use setAttribute to set event handlers on DOM nodes. Just use the event handler property direct, and assign it a function rather than a string:

document.getElementById('myId').onmouseover = function() {
  showMessage(document.getElementById('otherId').innerHTML);
};

edited Oct 2, 2009 at 8:43

answered Sep 24, 2009 at 10:58

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Everyone Over a year ago

Two questions - - IIRC the handler doesn't have to be an anonymous function; y/n? - Doesn't the argument passed need to be escaped?

Tim Down Over a year ago

Correct, the handler does not have to be an anonymous function. Second, I didn't focus so much on the escaping part of the question, but I assume that bit's no longer a problem?

Everyone · Accepted Answer · 2009-09-24 11:28:58Z

0

Tim's post up there helped me figure it out; albeit my understanding is empirical.

In addition to making a direct assignment

e.g.

document.getElementById(...).onMouseOver = stuff;
function stuff(){//do the Deed};

in lieu of

document.getElementById(...).setAttribute(...);

Apparently the event handler attached may not accept any argument.

I changed my handler signatures to accept 0 arguments, and it works!

answered Sep 24, 2009 at 11:28

Everyone

2,4062 gold badges29 silver badges41 bronze badges

2 Comments

Tim Down Over a year ago

No, in non-IE browsers your event handler functions will be passed an event object, which can be extremely useful. In IE you have to access the event via window.event. For example: el.onmouseover = function(evt) { evt = evt || window.event; /* Do stuff with event object */ };

Everyone Over a year ago

Ty (+: that is useful At the moment we're looking purely at IE though

Collectives™ on Stack Overflow

How to pass/escape an argument to an event handler attached using Javascript?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related