Geek Answers Handbook

JavaScript / HTML: posting item events

I recently read a blog post. In it, the author told readers that all of their "onclick" events are not embedded, but when the DOM is ready, like this (jQuery example):

<script type="text/javascript"> $(document).ready(function() { $("myElement").click(... }); </script>

This is for all elements on the page with events attached to them. And this script block, with all its postings, should go at the end of the page.

He said that installing it in line was more difficult:

 <span id="myElement" onclick="...">moo</span>

But he did not say why.

Is this true in other people's experiences? Is it better to do this? What are its advantages?

Thanks.

+4
source share
7 answers

Well, this is usually considered a good style to separate code and content from each other as much as possible. If you use this method, you have wonderfully pure HTML:

 <span id="myElement">moo</span>

and a separate central repository of code that you can store in one place, and you can even add an external Javascript file.

Editing an HTML layout becomes really fun and it looks great.

I do not always follow this rule in the letter itself, and I am not so jealous of it as of others. But I allow myself the maximum of calling the onclick='do_stuff()' function when executing inline strings. Everything more complex turns into a soup code very quickly.

+2
source

It is just dirty. It’s best to keep your logic separate from your layout, just as you should keep your layout separate from your style. If you maintain a clean separation, managing the code is easier, since you don’t have to look for your markup to change what happens when you hover over images, for example.

 # index.html <img class="thumbnail" src="puppies.jpg" /> # index.js $("img.thumbnail").fadeTo(0, 0.5).hover( function () { $(this).fadeTo("fast", 1.0); }, function () { $(this).fadeTo("slow", 0.5); } ); # index.css img.thumbnail { border:1px dotted red; }
+1
source

Having all the event handlers in one place makes the code much easier to maintain because you don’t have to look for HTML code looking for event handlers. It also allows you to use both single and double quotes in handlers and will not work with syntax errors when parsing a script block, and not when the event is first run.

In addition, each inline event handler requires the browser to parse a separate expression (equivalent to calling eval ), degrading performance.

+1
source

Advantages: you do not need to look for events generated by html controls in different controls (ASCX) or Page if your page has many controls (ASCX).

You can even debug whether an event is logged using Firebug or another debugger.

+1
source

Read this article on behavioral separation that explains graceful degradation when JavaScript is disabled. You can also find articles on unobtrusive JavaScript to understand the spirit of jQuery.

0
source

In addition, if you use event bubbling, you can avoid many event handlers.

0
source

The benefit to an inline event is that you can immediately see what happens when you complete an action by simply checking an element.

This is especially fast if you keep the old code or run by someone else.

Another advantage is speed, adding events later uses the DOM, and it's probably not as fast as the built-in generation.

And using an unobtrusive template engine like PURE , you can keep HTML clean with any JS logic

0
source

More articles:


All Articles