Question

Which is preferred/right or when should you use one over the other and also the benefits/downsides to using the following:

<a href="#" id="hypMyLink" onClick="myFunc();">a link</a>

<script>
    function myFunc(){
        //do something
    }
</script>

OR…

<a href="#" id="hypMyLink">a link</a>

<script>
    $(function() {
        $('#hypMyLink').click(function(e) {
            //do something
        });            
    });
</script>
    

Answer 1

In a perfect world of markup – all things being semantic you would seperate your markup, styling and javascript in their respective files.

It just makes things so much easier to debug and in an industry where things change so often it makes it extremely simple if you know exactly what you are looking for be it events, styling or markup.

As an example: moving to css files doing all the styling I have found that prethought is increased by segregating your elements that you require to select at a later time.