Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onclick="" vs event handler

If I want a function to be executed, I prefer doing inline js:

<p id="element" onclick="doSomething();">Click me</p> 

because it is easier to debug.

However, I hear people saying not to use inline js, and do:

document.getElementById('element').onclick = doSomething; 

Why is the js event listener recommended?

like image 637
Johan Avatar asked Aug 04 '11 12:08

Johan


People also ask

Is Onclick an event handler?

In the case of the" onClick" event handler, which executes a piece of JavaScript when an element is clicked on, it can only be added to visible elements on the page such as <a>, form buttons, check boxes, a DIV etc.

What is difference between Onclick and Onclick?

onClick will work in html, but if you're defining the handler in JS, you need to use the lowercased onclick. in XHTML, HTML attributes are case sensitive.

Should you use onclick?

For little web apps with a minimal amount of code, it doesn't matter. But if you aspire to write large, maintainable codebases, onclick="" is a habit that you should work to avoid.

What can we use instead of addEventListener?

onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.


2 Answers

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.

like image 167
Felix Kling Avatar answered Sep 20 '22 08:09

Felix Kling


Basically it has to do with the whole keep everything separate I believe. So keep HTML/CSS/JS all separate. It makes your HTML tidier and, I think, easier to navigate without.

Then when/if you need to make large changes, you have ample space with having to shift the inline JS to an external file anyway OR if you want to apply the same function to more than one button, then it's less code. And less code is a happier place

If you have your JS files properly, and thoroughly documented then navigating them by an outside person is made eaiser

like image 32
LeeR Avatar answered Sep 17 '22 08:09

LeeR