Unobtrusive Javascript, should I use it? what is the best way to manage and organize events? how do I prevent inefficiencies?

You are confused. Unobtrusive JavaScript is not just about defining event handlers in a program. It's a set of rules for writing JavaScript such that the script doesn't affect the functionality of other JavaScript on the same page.

JavaScript is a dynamic language. Anyone can make changes to anything. Thus if two separate scripts on the same page both define a global variable add as follows, the last one to define it will win and affect the functionality of the first script script 1 var add = function (a, b) { return a + b; }; // script 2 add = 5; //script 1 again add(2, 3); // error - add is a number, not a function Now, to answer your question directly: The extra overhead to find an element in JavaScript and attach an event listener to it is not a lot.

You can use the new DOM method document. QuerySelector to find an element quickly and attach an event listener to it (it takes less than 1 ms to find the element) If you want to attach your event listeners quickly, don't do it when your document content loads. Attach your event listeners at the end of the body section or directly after the part of your HTML code to which you wish to attach the event listener I don't see how altering the markup could affect the JavaScript in any manner.

If you try to attach an event listener to an element that doesn't exist in JavaScript, it will silently fail or throw an exception. Either way, it really won't affect the functionality of the rest of the page. In addition, a HTML designer really doesn't need to know about the events attached any element.

HTML is only supposed to be used for semantic markup; CSS is used for styling; and JavaScript is used for behavior. Don't mix up the three God has given us free will. Use it.

JavaScript supports conditional execution. There are if statements. See if homePageDiv exists and only then attach an event listener to it Try: $(document).

Ready(function () { $("ul. Li"). Bind("click",doSomething()); if (document.

QuerySelector(". HomePageDiv")) { $(". HomePageDiv").

Bind("click",doSomethingElse()); } else { $(". SearchPageDiv"). Bind("click",doSomethingSearchy()); } }) Your question had very little to do with unobtrusive JavaScript.It showed a lack of research and understanding.

Thus, I'm down voting it. Sorry.

You are confused. Unobtrusive JavaScript is not just about defining event handlers in a program. It's a set of rules for writing JavaScript such that the script doesn't affect the functionality of other JavaScript on the same page.

JavaScript is a dynamic language. Anyone can make changes to anything. Thus if two separate scripts on the same page both define a global variable add as follows, the last one to define it will win and affect the functionality of the first script.

// script 1 var add = function (a, b) { return a + b; }; // script 2 add = 5; //script 1 again add(2, 3); // error - add is a number, not a function Now, to answer your question directly: The extra overhead to find an element in JavaScript and attach an event listener to it is not a lot. You can use the new DOM method document. QuerySelector to find an element quickly and attach an event listener to it (it takes less than 1 ms to find the element).

If you want to attach your event listeners quickly, don't do it when your document content loads. Attach your event listeners at the end of the body section or directly after the part of your HTML code to which you wish to attach the event listener. I don't see how altering the markup could affect the JavaScript in any manner.

If you try to attach an event listener to an element that doesn't exist in JavaScript, it will silently fail or throw an exception. Either way, it really won't affect the functionality of the rest of the page. In addition, a HTML designer really doesn't need to know about the events attached any element.

HTML is only supposed to be used for semantic markup; CSS is used for styling; and JavaScript is used for behavior. Don't mix up the three. God has given us free will.

Use it. JavaScript supports conditional execution. There are if statements.

See if homePageDiv exists and only then attach an event listener to it. Try: $(document). Ready(function () { $("ul.Li").

Bind("click",doSomething()); if (document. QuerySelector(". HomePageDiv")) { $(".

HomePageDiv"). Bind("click",doSomethingElse()); } else { $(". SearchPageDiv").

Bind("click",doSomethingSearchy()); } }); Your question had very little to do with unobtrusive JavaScript. It showed a lack of research and understanding. Thus, I'm down voting it.

Sorry.

Unfortunately I think my main question is being missed. I do understand unobtrusive javascript and my questions stem from one of its main principles, the seperation of the functional and presentation layers (hence all the reference to binding events) I will try and re work my question so its a little clearer. Thanks – CodeMonkeyB Oct 13 at 14:15.

Just because jQuery.ready() executes does not mean that the page is visible to the end user. This is a behaviour defined by browsers and these days there are really 2 events to take into consideration here as mootools puts it DomReady vs Load. When jQuery executes the ready method it's talking about the dom loading loaded however this doesn't mean the page is ready to be viewed by the user, external elements which as pictures and even style sheets etc may still be loading.

Any binding you do, even extremely inefficient ones will bind a lot faster than all the external resources being loaded by the browser so IMHO user should experience no difference between the page being displayed and functionality being made available. As for finding binding on elements in your DOM. You are really just fearing that things will get lost.

This has not really been my actual experience, more often than not in your JS you can check what page you are on and only add javascript for that page (as Aadit mentioned above). After that a quick find operation in your editor should help you find anything if stuff gets lost. Keep in mind that under true MVC the functionality has to be separate from the presentation layer.

This is exactly what OO javascript or unobtrusive javascript is about. You should be able to change your DOM without breaking the functionality of the page. Yes, if you change the css class and or element id on which you bind your JS will break, however the user will have no idea of this and the page will at least appear to work.

However if this is a big concern you can use OO-Javascript and put div's or span's as placeholders in your dom and use these as markers to insert functionality or tell you that it exists, you can even use html comments. However, in my experience you know the behavior of your site and hence will always know that there is some JS there. While I understand most of your concerns about useless traversals, I do think you are nickle and dime'ing it at this point if you are worried about 1 additional traversal.

Previous to IE8 it used to be the case that traversing with the tag name and id was a lot faster than my selector but this is no longer true infact browsers have evolved to be much faster when using just the selectors: $("a#myLink") - slowest. $("a. MyLink") - faster.

$("#Link") - fastest. $(". MyLink") - fastest.In the link below you can see that as many as 34 thousand operations per second are being performed so I doubt speed is an issue.

You can use firebug to test the speed of each in the case of a very large dom. In Summary: a) Don't worry about losing js code there is always ctrl+f b) There is no lag because dom ready does not mean the page is visible to start with. Update Fixed order of speed in operations based on the tests results from here However keep in mind that performances of IE.

2 Your explanation of the speed of selectors is very wrong, and is almost the opposite of what's true. – Alex Oct 13 at 11:26 You're right Test samples using jquery my testing was done with Prototype library and at least through FB the results were faster... I'll update the answer, still, it only goes to show that there is no reason to worry above speed. – Ali Oct 13 at 13:51 Unfortunately people are still using IE7 and below but in general what you said makes sense.

I came across an implementation of namespaces in javascript which I think might be a good way to manage javascript at a page level. – CodeMonkeyB Oct 13 at 14:19.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.