What is the most effective way to develop a html5 or js code?

For example when I want to do an event on the button click I can do it in two ways:

using the onclick attribute of html5 <button type='button' onclick='myFunction()' id='btn0'>O</button>

or by js:

$('#btn0').click(function(){

    myFunction();

});

There are situations that occur using two ways such as:

<form>
  <input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('click event occured')">
</form>

<script>
function myFunction() {
    document.getElementById("myCheck").click();
}
</script>

Is this merge good? What is the right way to develop and why? What's the difference between using one or the other? if possible what are the advantages and disadvantages?