Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30693

Re: Object Oriented Elements, callbacks...

Show all headers | View raw

On 6/18/2016 3:19 PM, Michael Haufe (TNO) wrote:
> On Saturday, June 18, 2016 at 4:56:31 PM UTC-5, Chris M. Thomasson wrote:
>> Just wondering what you all think of the way I am hooking up DOM
>> elements, buttons for now, to objects via callbacks. [...]
>
> Try using handleEvent method instead on the prototype:
>
> function MyButton(el){
>   this.el = el
>   el.addEventListener('click', this)
> }
> MyButton.prototype = {
>   handleEvent: function(e){ this['on' + e.type](e) },
>   onclick: function(e){
>     alert("Hello World")
>   }
> }
>
> var foo = new MyButton(document.getElementById('g_html_button'))
>

What about something like:
_________________________________________

// Base button attached to a user object
function ct_button(el, state) {
     if (!state) throw "ct_button::ct_button(state == null), WTF!";
     this.m_el = el;
     this.m_state = state;
}

ct_button.prototype = {
     // root event multiplexer
     handleEvent: function (e) {
         this.m_state['on_' + e.type](e);
     },

     add_listener: function (n) {
         this.m_el.addEventListener(n, this);
     },

     remove_listener: function (n) {
         this.m_el.removeEventListener(n, this);
     }
};

// Helper function wrt (getElementById)
function ct_button_from_id(id, state) {
     var el = document.getElementById("g_html_button");
     if (!el) return null;
     return new ct_button(el, state);
}



// A user defined button
function ct_my_button() {
     this.m_state = 123;
     this.m_button = ct_button_from_id("g_html_button", this);
     this.m_button.add_listener("click");
}

ct_my_button.prototype = {
     on_click: function (e) {
         alert("Hello World, this.state = " + this.m_state);
     }
};
_________________________________________

This way "user defined" objects do not need to explicitly define 
(handleEvent). Also, all events flow through the base (handleEvent) 
function in (ct_button) before they call the appropriate event handler 
in the user object in (ct_button::m_state).

Well, humm... Is this just unnecessary clutter? Or is it not all that 
terrible!

;^o

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 14:56 -0700
  Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 15:03 -0700
    Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-18 15:12 -0700
    Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-18 15:12 -0700
  Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-18 15:19 -0700
    Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-19 01:06 -0700
    Re: Object Oriented Elements, callbacks... "Chris M. Thomasson" <nospam@nospam.invalid> - 2016-06-19 12:06 -0700
      Re: Object Oriented Elements, callbacks... "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-06-19 12:27 -0700

csiph-web