Take the 2-minute tour ×

Hi I really could do with a point in the right direction with this question.

I'm trying to fathom object orientated javascript, but am having trouble getting my head around binding dom elements to objects.

I would like to make a little animated widget type thing for my web page. the widget will be just simple drop down tabs , (like tabs from an actual folder) I want the tab to drop down a bit with a mouseover event then raise up with mouseout.

here is my current implementation, it doesnt work well at the moment it's just a mock up http://bombinglish.com/

I want to make a class for the tabs , which will include the open and close animation methods, methos to add events, and other necessary fields. then instanciate a new object for each tab. but how do I do I tell each object that it must must respond to the corresponding mouse events, or to put it another way how do I bind the DOM element to the object?

share|improve this question
Always include all relevant code in the question itself, don't just link. Why: meta.stackexchange.com/questions/118392/… –  T.J. Crowder May 14 '13 at 21:13
If i had any relavant code to include i would put it , since the link I put uses plain old js it's not really relavant to my question but just gives an idea to what i would like to acheive using an oop aproach.i was just hoping someone could point me in the right direction , or tell me what sort of information i should be looking for. –  Robert Brooks May 14 '13 at 21:48

1 Answer 1

up vote 1 down vote accepted

If you are using Javascript just for presentation logic, then I don't think it's worth anything to try and get wild with OO.

If you have that at the top of every page, you could simply label the tabs with a unique class name. Then in your Javascript file you bind a mouseover event on every DOM element with that class name.

Perhaps, others have differing opinions on this however.

share|improve this answer
thanks, for the reply i could just make it work without oop , but i thought it would be a nice little thing to break me into oop and javascript. plus later on i will be adding more tabs and thought it would just be easirer if i could just create a new object everytime i wanted a new tab –  Robert Brooks May 14 '13 at 21:52
Delegation to a parent element is a commonly used alternative to putting a listener on every element with a class, particularly if there is an existing container element to use. –  RobG May 14 '13 at 22:54

Your Answer


