Question

Adding inline javascripts to the html tags (e.g. onclick, onsubmit…etc) is considered bad practice.

<form id="form1" onsubmit="return validate();">
...
</form>
<a id="link1" href="http://www.google.com/" onclick="return popup();">Link1</a>

But if we do it like below, is this possible that the validate or popup function does not get called because the user interacts with the page before the dom ready function is called?

<form id="form1">
...
</form>
<a id="link1" href="http://www.google.com/">Link1</a>
<script type="text/javascript">
$(document).ready(
    function(){
        $('#form1').submit(
            //validate
            function(){...}
        );
        $('#link1').click(
            //popup
            function(){...}
        );
    }
);
</script>

Answer 1

You can always create them disabled and then use the ready event to make them enabled only after the events have been bound.

Note that the onxxx in the HTML may try to access things that do not exist yet if you try to traverse the DOM in them, which likely causes errors and is worse than having the user wait for a fraction of a second.