onclick=”” vs event handler

by

One big argument against inline event handlers, and the argument that is addressed by the other answers here is the separation of presentation and logic.

However, there is actually a bigger problem IMO: The somehow elusive way how inline event handlers are evaluated.

As you may know, the content of the on* attributes will be used as body of the event handler function. But what characteristics does this function have?

One of the surprising ones is that properties of some ancestor elements and of the element itself are in the scope of the inline event handler. 

<form>
    <input name="foo" />
    <button type="button" onclick="console.log(foo); console.log(window.foo);">
        Click me
    </button>
    <div onclick="console.log(foo);">Click me as well!</div>
</form>

Clicking the button logs 

<input name="foo"></input>
undefined

in the console. The fact that window.foo is undefined tells you that there is no global variable foo. So where does the variable foo come from? Why does console.log(foo) log the input element and not throw a reference error?
Because the properties of the form element are in the scope of the event handler and the form element has a property for each named form control element it contains. You can easily test this with console.log(document.querySelector('form').foo).

Now, clicking the div element actually throws a reference error:

ReferenceError: foo is not defined

So apparently the form element is only in scope of form control elements, not any descendant. How confusing is that?

Similarly, the properties of the document object are also in the scope of inline event handlers, which can lead to some surprising bugs (did you know that document has a property plugins?).

How exactly inline event handlers are evaluated is formalized in the HTML5 spec. Have a loop at step 10 in particular where he scope chain creation is described.

Conclusion:

Because of this implicit connection between elements and inline event handlers, bugs can be really hard to track. It’s of course fine to use inline event handlers if you just want to test something. But using them in production code comes with a higher maintenance cost.

The articles at quirksmode.org explain the different ways of binding event handlers and their (dis)advantages very well.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. window.onload vs document.onload
  4. Detecting Browser Autofill
  5. How do I add a simple onClick event handler to a canvas element?
  6. When should I use jQuery’s document.ready function?
  7. jQuery checkbox checked state changed event
  8. jQuery checkbox change and click event
  9. DOM event precedence
  10. Javascript event handler with parameters
  11. How to removeEventListener that is addEventListener with anonymous function?
  12. event.preventDefault() vs. return false (no jQuery)
  13. Handle URL fragment identifier (anchor) change event in Javascript
  14. Accessing an object’s property from an event listener call in JavaScript
  15. Alternative to jQuery’s .toggle() method that supports eventData?
  16. Need to cancel click/mouseup events when double-click event detected
  17. How do you handle oncut, oncopy, and onpaste in jQuery?
  18. How to pass event as argument to an inline event handler in JavaScript?
  19. jQuery equivalent of JavaScript’s addEventListener method
  20. Why is ‘event’ available globally in Chrome but not Firefox?
  21. Fake “click” to activate an onclick method
  22. React.js Serverside rendering and Event Handlers
  23. jQuery .on(); vs JavaScript .addEventListener();
  24. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  25. Detect scroll direction in React js
  26. Handling standby on iPad using Javascript
  27. D3: How do I set “click” event and “dbclick” event at the same time?
  28. How can I remove a JavaScript event listener?
  29. javascript click event handler fires without clicking
  30. Explain ExtJS 4 event handling

Leave a Comment