How to detect event by JavaScript?

Question

I have to file. One HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>JavaScriptSolution</title>
    <script src='./script.js' charset='utf-8' defer='defer'></script>
</head>
<body>
<input id='A1' value='On Keydown' style='width:100px; height:50px; margin:30px;'/>

<input id='A2' value='On Keyress' style='width:100px; height:50px; margin:30px;'/>

<input id='A3' value='On Keyup' style='width:100px; height:50px; margin:30px;'/>

<input id='A4' value='On Focus' style='width:100px; height:50px; margin:30px;'/>

<input id='A5' value='On Blur' style='width:100px; height:50px; margin:30px;'/>

<div id='A6' style='width:100px; height:50px; margin:30px;'>
    On Click
</div>
<div id='A7' style='width:100px; height:50px; margin:30px;'>
    On Mouse Move
</div>
<div id='A8' style='width:100px; height:50px; margin:30px;'>
    On Mouse Over
</div>
<div id='A9' style='width:100px; height:50px; margin:30px;'>
    On Mouse Out
</div>


</body>
</html>

And other one JavaScript:

function byid(id_name) 
{ 
    return document.getElementById(id_name); 
}

byid('A1').onkeydown=function a1(){ alert('On Keydown'); }
byid('A2').onkeypress=function a2(){ alert('On Keypress') ; }
byid('A3').onkeyup=function a3(){ alert('On Keyup') ; }
byid('A4').onfocus=function a4(){ alert('On Focus'); }
byid('A5').onblur=function a5(){ alert('On Blur') ; }
byid('A6').onclick=function a6(){ alert('On Click') ; }
byid('A7').onmousemove=function a7(){ alert('On Mouse Move') ; }
byid('A8').onmouseover=function a8(){ alert('On Mouse Over') ; }
byid('A9').onmouseout=function a9(){ alert('On Mouse Out') ; }

My script work great on Firefox, Safari, IE, Chrome. But didn't work on Opera & Some Android Browser. What's wrong in my script?

Can anyone solve this problem?

@ShadowWizard: the questioner would expect that defer would prevent that from being necessary - an explanation as to why that's necessary would be good. — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Oct 13, 2013 at 12:44
Opera 16 (latest one) is just based on Chromium! Don't bother about old browser much! Offer user an update! — Ilia Ross
– Ilia Ross, Commented Oct 13, 2013 at 12:45

user447356 · Accepted Answer · 2013-10-13 13:04:01Z

Adding defer='defer' to the script tag should indeed wait until the page is fully loaded, but as it stands now, even these days not all browsers are supporting it i.e. they will ignore it, causing the elements to not exist when the code is executed.

Full list of browsers support can be seen here. Snapshot:

You probably have old version of Opera or Opera mini, hence it didn't work.

To solve this just play it safe by using the very basic window.onload which works on all browsers:

window.onload = function() {
    byid('A1').onkeydown=function a1(){ alert('On Keydown'); }
    byid('A2').onkeypress=function a2(){ alert('On Keypress') ; }
    //...
};

Alternative way would be to place the script tag with the reference to your JS file in the very end of the document, right before the </body> tag - with or without defer.

Collectives™ on Stack Overflow

How to detect event by JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related