Developing Javascript OO Widgets.

Hi All,

I've been developing my own customized widgets in javascript for html form elements.
For example, I have one widget that is a date widget, it has three drop down boxes for day month and year that are all part of a javascript object that can be reused. As i said.. it is a javascript object so it is completely generated and displayed by code.

The only issue that is has is when events come into the situation. If say.. i want to add a onclick i need to add it as an attribute to my drop down element and reference the complete path which breaks my nice OO reusable object widget design.

   	
attr = document.createAttribute("onchange");
attr.nodeValue  = some_unknown_path.setYear()";
dropDownYear.setAttributeNode(attr);

Code (markup):

Anyway... there must be someone out there who has done a similar thing. Are there any suggested patterns or ways of building reusable widget objects in this way?

 

Hi!

To add events in an OO fashion, use addeventListener. MSIE does not support in the W3C fashion, so you will need a small wrapper to aid.

Event listener functions are passed an e object argument (both in MSIE and W3C). You can get the DOM element that fired the event like this:

var obj = e.target || e.srcElement;

Code (markup):

Adding event handlers any other way is clunky. In particular, the on* attributes should never be used - they break the clear separation of document structure and scripting.

Hope that assists.

Regards
- P