Why does this event handling code for ender break when I try to clean it up some?

0

Issue

This is the code that works properly:

bonzo.aug({
  bind: function (event, handler) {

    if (this[0].attachEvent)
            this[0].attachEvent('on'+event, handler);
          else
            this[0].addEventListener(event, handler);
        },
  unbind: function (event, handler) {
            if (this[0].detachEvent)
              this[0].detachEvent('on'+event, handler);
            else
              this[0].removeEventListener(event, handler);
          },
  once: function (event, handler) {
          function doOnce(e) {
            bonzo(this).unbind(event, doOnce);
            handler.call(this, e);
          }
          this.bind(event, doOnce);
        }
});

But then when I try to consolidate and soup parts of it up a little, unbind and once break:

(function($){
  $.ieEventApi = !!window.attachEvent; // !-[1,];

  $.addEventListener = $.ieEventApi ? "attachEvent" : "addEventListener",
  $.removeEventListener = $.ieEventApi ? "detachEvent" : "removeEventListener",
  $.onForIe = $.ieEventApi ? 'on' : '',
  $.adaptEventHandlerForIe = function(f){
    return function(e){
      e.target = e[(e.target ? e.target : (e.srcElement || document))];
      return f(e);
    };
  };



  $.aug({
    bind: function (event, handler) {
            for(var i = 0; i < this.length; i++) // I'd use Bonzo.each if I could find any documentation for its use.. :-\
                this[i][$.addEventListener]($.onForIe+event, $.adaptEventHandlerForIe(handler), false); // The "false" is superfluous on IE, but apparently not problematically so.
            return this;
          },
    unbind: function (event, handler) {
              for(var i = 0; i < this.length; i++)
                this[i][$.removeEventListener]($.onForIe+event, $.adaptEventHandlerForIe(handler), false); 
              return this;
            },
    once: function (event, oncehandler) {
            // This just calls the other two, which already handle iteration.
            this.bind(event, doOnce);
            return this;

            function doOnce(e) {
              $(e.target /*Or should I be using e.target here?*/ ).unbind(event, doOnce);
              oncehandler.call(this, e);
            }
          }
  });
})(bonzo);

Solution

Shouldn’t the following line

e.target = e[(e.target ? e.target : (e.srcElement || document))];

be something like

e.target = e[e.target ? 'target' : (e.srcElement ? 'srcElement' : 'document')];

? I mean, when you’re referring to a prop in an object and using square brackets you should write the inner value in string format. So e.etc should become e['etc'].

Answered By – inhan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More