How to reference the caller object (“this”) using attachEvent

by

From this quirksmode article with regard to attachEvent:

  1. Events always bubble, no capturing possibility.
  2. The event handling function is referenced, not copied, so the this keyword always refers to the window and is completely useless.

The result of these two weaknesses is that when an event bubbles up it is impossible to know which HTML element currently handles the event. I explain this problem more fully on the Event order page.

Since the Microsoft event adding model is only supported by Explorer 5 and higher on Windows, it cannot be used for cross–browser scripts. But even for Explorer–on–Windows only applications it’s best not to use it, since the bubbling problem can be quite nasty in complex applications.

I haven’t tested it, but a possible workaround may be to wrap the handler in an anonymous function that calls your handler via funct.call().

else if(element.attachEvent){
   element.attachEvent("on"+name, function(){ funct.call( element ) });
}

My apologies for the untested solution. I don’t like doing that, but can’t easily get to IE right now.

More Related Contents:

  1. Can I load an entire HTML document into a document fragment in Internet Explorer?
  2. DOMNodeInserted equivalent in IE?
  3. “Access is denied” JavaScript error when trying to access the document object of a programmatically-created (IE-only)
  4. DOM refresh on long running function
  5. Forcing a DOM refresh in Internet explorer after javascript dom manipulation
  6. Add a link stylesheet dynamically in the [closed]
  7. IE’s document.selection.createRange doesn’t include leading or trailing blank lines
  8. IE support for DOM importNode
  9. Images failing to load in IE with DOM: 7009 error (unable to decode) in console
  10. What does “this” refer to in arrow functions in ES6?
  11. ‘innerText’ works in IE, but not in Firefox
  12. Remove all child elements of a DOM node in JavaScript
  13. Changing website favicon dynamically
  14. How to fix Array indexOf() in JavaScript for Internet Explorer browsers
  15. Dynamically set value of a file input [duplicate]
  16. Detect IE version (prior to v9) in JavaScript
  17. What is the difference between children and childNodes in JavaScript?
  18. Fixing JavaScript Array functions in Internet Explorer (indexOf, forEach, etc.) [closed]
  19. Javascript “this” pointer within nested function
  20. How to add/remove a class in JavaScript?
  21. window.location.reload with clear cache [duplicate]
  22. How can I remove all CSS classes using jQuery/JavaScript?
  23. Get element node at caret position (in contentEditable)
  24. Convert String to XML Document in JavaScript
  25. Responding to the onmousemove event outside of the browser window in IE
  26. Why doesn’t Node.js have a native DOM?
  27. Javascript Invalid Date Error in Internet Explorer
  28. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  29. In web browsers, what’s the difference between onblur and onfocusout?
  30. Create a table in SVG

Leave a Comment