Javascript IE8无法从attachEvent获取“ this”

Question

This is a method of a larger class

myMethod.prototype.click=function(func){

 if (window.addEventListener) {
  this.selArray[i].addEventListener('click', func, false);
} else if (window.attachEvent) {
  this.selArray[i].attachEvent('onclick', func);
}


return this;

}

Which if I instigate passing this function....

myInstance.click(

    function () {
    alert(this.id)
    }
);

...alerts 'undefined' in IE 8 but returns the ID of the DOM object the click event is attached to in Firefox and Safari.

Answer 1

Right, attachEvent doesn't quite work the way addEventListener does. You can do this:

if (window.addEventListener) {
  this.selArray[i].addEventListener('click', func, false);
} else if (window.attachEvent) {
  this.selArray[i].attachEvent('onclick', func.bind(this.selArray[i]));
}

That uses Function#bind to ensure that this is the element on which you're hooking the event. You have have to shim/polyfill Function#bind on older browsers (like IE8), search for "es5 shim" for options.

Or if you don't want to use Function#bind , use a closure over the call to click :

myMethod.prototype.click=function(func){
    var elm = this.selArray[i];
    if (window.addEventListener) {
      elm.addEventListener('click', func, false);
    } else if (window.attachEvent) {
      elm.attachEvent('onclick', function(e) {
        return func.call(elm, e || window.event);
      });
    }

    return this;
}

Side note: Browsers that only supply attachEvent don't have preventDefault or stopPropagation on the event object, either. A thorough shim (such as that in jQuery or PrototypeJS or various other libraries) adds those. The equivalent of preventDefault is e.returnValue = false; ; the equivalent of stopPropagation is e.cancelBubble = true; .