Developing Javascript OO Widgets.

Discussion in 'JavaScript' started by bandito, Sep 30, 2006.

  1. #1
    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?
     
    bandito, Sep 30, 2006 IP
  2. penagate

    penagate Guest

    Messages:
    277
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    penagate, Oct 1, 2006 IP