Difference between obtrusive and unobtrusive javascript

Solution 1:

No javascript in the markup is unobtrusive:

Obtrusive:

<div onclick="alert('obstrusive')">Information</div>

Unobtrusive:

<div id="informationHeader">Information</div>

window.informationHeader.addEventListener('click', (e) => alert('unobstrusive'))

Solution 2:

I don't endorse this anymore as it was valid in 2011 but perhaps not in 2018 and beyond.

Separation of concerns. Your HTML and CSS aren't tied into your JS code. Your JS code isn't inline to some HTML element. Your code doesn't have one big function (or non-function) for everything. You have short, succinct functions.

Modular. This happens when you correctly separate concerns. Eg, Your awesome canvas animation doesn't need to know how vectors work in order to draw a box.

Don't kill the experience if they don't have JavaScript installed, or aren't running the most recent browsers-- do what you can to gracefully degrade experience.

Don't build mountains of useless code when you only need to do something small. People endlessly complicate their code by re-selecting DOM elements, goofing up semantic HTML and tossing numbered IDs in there, and other strange things that happen because they don't understand the document model or some other bit of technology-- so they rely on "magic" abstraction layers that slow everything down to garbage-speed and bring in mountains of overhead.