It's generally good to try to keep HTML and JS generally separated. HTML is for the view, JS is for the application logic. But in my experience extreme decoupling of html and javascript (for the sake of purity) does not make it more maintainable; it can actually be less maintainable.

For example, I sometimes use this pattern (borrowed from ASP.net) in setting up event handlers:

<input type="button" id="yourId" onclick="clickYourId()" />

or

<input type="button" id="yourId" onclick="clickYourId(this)" />

There's no mystery what is triggering an event to happen. The reason is that six months later you can inspect the element (eg, in Chrome) and see immediately what javascript event is triggered.

On the other hand, imagine you are reading someone's else's code, which is a hundred thousand lines, and you come across a magical element that fires off a javascript event:

<input id="yourId"  />

How can you easily tell me what javascript method this is calling? Perhaps the event is bound to the id, or perhaps it's bound to the first child of the container. Maybe the event is attached to the parent object. Who knows? Good luck finding it in thousands of lines of code. :)

Also, I would argue that hiding javascript completely from the designer may actually increase the likelihood of them breaking it on an update. If someone edits code for an magically active element, what indication in the code do they have that would let them know this is an active element on the page?

So in short, best practice is to separate HTML and Javascript. But also understand rules of thumb are sometimes counterproductive when carried to the extreme. I'd argue for a middle-road approach. Avoid large amounts of inline js. If you do use inline, the function signature should be very simple like:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

It's generally good to try to keep HTML and JS generally separated. HTML is for the view, JS is for the application logic. But in my experience extreme decoupling of html and javascript (for the sake of purity) does not make it more maintainable; it can actually be less maintainable.

For example, I sometimes use this pattern (borrowed from ASP.net) in setting up event handlers:

<input type="button" id="yourId" onclick="clickYourId()" />

or

<input type="button" id="yourId" onclick="clickYourId(this)" />

There's no mystery what is triggering an event to happen. The reason is that six months later you can inspect the element (eg, in Chrome) and see immediately what javascript event is triggered.

On the other hand, imagine you are reading someone's else's code, which is a hundred thousand lines, and you come across a magical element that fires off a javascript event:

<input id="yourId"  />

How can you easily tell me what javascript method this is calling? Chrome has made this easier, but perhaps the event is bound to the id, or perhaps it's bound to the first child of the container. Maybe the event is attached to the parent object. Who knows? Good luck finding it. :)

Also, I would argue that hiding javascript completely from the designer may actually increase the likelihood of them breaking it on an update. If someone edits code for an magically active element, what indication in the code do they have that would let them know this is an active element on the page?

So in short, best practice is to separate HTML and Javascript. But also understand rules of thumb are sometimes counterproductive when carried to the extreme. I'd argue for a middle-road approach. Avoid large amounts of inline js. If you do use inline, the function signature should be very simple like:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)