js/no-inline-handlers

Why

An onclick="save()" attribute is a string of script inside the markup: it only reaches functions on the global object, mixes behaviour into the HTML, and is blocked by any Content Security Policy that does not allow unsafe-inline, which is the main protection against injected script.

Fix

Give the element a hook (id, a class or a data- attribute) and attach the handler from a module: button.addEventListener('click', save). For many similar elements, add one listener to their container and find the target with event.target.closest(). Framework handlers (onClick={...}, @click, (click)) are not inline attributes and are fine.

Examples

<!-- bad -->
<button type="button" onclick="save()">Save</button>
<!-- good -->
<button type="button" id="save">Save</button>
<script type="module">document.getElementById('save').addEventListener('click', save)</script>

Sources

• MDN, Introduction to events (inline event handlers - don't use these)
• MDN, Content Security Policy (inline script and unsafe-inline)

Read it in the terminal

npx github:dawidolko/frontend-skills explain js/no-inline-handlers