All Things Patrick - Working Hard to be Lazy!

  • home
  • blog
  • links
Home › Blogs › patrick's blog

addEventListener/attachEvent & Function References

patrick — Wed, 2006-09-13 16:42

Craig Fowler stumped me today until he provided a further sampling of his code. Shortly thereafter I realized what the issue was as I've run into the same issue in the past (& hopefully this page will prevent me being stumped in the future).

The code he initially presented me with was

<a onclick="obj1.doSomething();"> ...

and he stated he was having issues with using this.someMethod(); inside of obj1... i.e.

var obj1 = new function() {
    this.name = 'Object 1';
 
    this.doSomething = function() {
        this.someMethod(
            'Hello, my name is ' + this.name
        );
    };
 
    this.someMethod = function( text ) {
        alert( text );
    }
};


Granted, you really wouldn't write code this bad, but we're just whipping up a quick example to test the problem.
well, putting <a href="#" onclick="obj1.doSomething();"> works just fine... At which point Craig mentioned that that was the end result he was wanting... what he was using to attach it was this snippet from a function -

if(eventElement.addEventListener) {     eventElement.addEventListener("click",       subscribers[currentSubscription].shout, false) } else if(eventElement.attachEvent) {     eventElement.attachEvent("onclick",       subscribers[currentSubscription].shout) }

I had to laugh as soon as I saw it because I remembered doing the same thing. Javascript variables are not really variables... what you create with var a = 1 + 1; is a reference to a protected variable inside the Javascript engine. There are alot of detailed discussions about this elsewhere so I won't go that route.

Initially looking at the code you may think that the function you're giving to addEventListener/attachEvent is going to be the code that goes inside the onclick event... i.e.

element.onclick = function() {     passedFunction(); }

But in reality what is happening is this -

element.onclick = passedFunction;

I don't know of any good solutions. The solution I had come up with before was to write a proxy function. Craig did the same thing in writing a proxy method into the parent class. A proxy function would be something like the following -

function proxyFunction( evt ) {     evt = evt || window.event;     ...code to determine what function *really* needs to be called...     if ( realFunction ) {         realFunction();     } }

Trackback URL for this post:

https://blog.whitelionsoft.com/trackback/31
  • Firefox
  • Friends
  • HTML
  • Internet Explorer
  • JavaScript
  • patrick's blog
  • Add new comment

User login

What is OpenID?
  • Log in using OpenID
  • Cancel OpenID login
  • Create new account
  • Request new password

Pages

  • About Me
  • About My Boxen
  • Quotes
  • 3d Graphics
  • Color Picker App
  • Resume
  • dailymile
  • facebook
  • twitter

Tags in Tags

CSS Design Development Entertainment EVE-Online Firefox Freelance Friends Games Hardware HTML Internet Explorer JavaScript Job Movies & TV Operating Systems Personal PHP Security Windows
more tags

Blogroll

  • 456 Berea Street
  • Anne van Kesteren’s Weblog
  • Clients From Hell
  • Derick Rethans' blog
  • Doug Seitz
  • Eric Meyer
  • Terry Chay
  • The FAIL Blog

Powered by Drupal, an open source content management system
  • home
  • blog
  • links