Home/ Questions/Q 3988662
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T06:16:45+00:00

I have a following code which I tried to assign onfocus event to the

  • 0

I have a following code which I tried to assign onfocus event to the element, so that whenever the element gets focused, call alert.
However, alert only appears when the page loaded, and never after that. 

<html>
<head>
</head>
<body onload = "loadings();">
<div>   
    <form>  
        <input type="text" id="foo"/>
    </form>
</div>

<script type="text/javascript">
function loadings(){
    document.getElementById("foo").onfocus = alert("foo"); 
}
</script>
</body>
</html>

Please note that I can’t do <input type="text" id="foo" onfocus="alert('foo')"/> for the thing I am trying to achieve.

Also this should work in Firefox, Chrome, IE, Safari.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This code:

    document.getElementById("foo").onfocus = alert("foo");

    assigns the result of calling alert() to the onfocus property.
    What you meant is:

    document.getElementById("foo").onfocus = function(){ alert("foo"); };

    This is using the DOM Level 0 event model where you can only have one handler per event. If you want something more flexible while still cross-platform then you may try some library to abstract the event model for you like jQuery does:

    $('#foo').focus(function(){ alert("foo"); });

    That way you don’t have to worry about attachEvent in IE vs. addEventListener in everything else, but if you only need the simple case like in your example then the Level 0 model is perfectly fine and works across all browsers.

    • 0