CODEWITHSUNDEEP
javascriptoop
Dustin M.
Dustin M.

Reputation: 2974

How do I reference an object method in javascript from outside the object (through event)?

I am creating a fairly complex object and want to be able to manipulate the object from the outside. I want to reference an privileged method from a click event

function myObject(){
   //How do I reference this function?
   this.doSomething = function (action){
        var doing = action;
   }

}

I understand that I could reference the method if I create the object inside a variable like:

var obj = new myObject();
obj.doSomething('hit keyboard');

But the links I am creating to trigger this event are being created by the object, but placed outside the object, so they will not know the container variable to reference it.

i.e.

<a href="#" onclick="doSomething()">Do Something</a>

doesn't work because of course the doSomething method is part of the object, not a global function. I could rewrite the code to make it global, but would rather avoid doing that.

If this question doesn't make sense I would be happy to make it clearer. Thanks in advance.

Upvotes: 0

Views: 3751

Answers (5)

Kon
Kon

Reputation: 27441

The problem is that there's a disconnect between the instance of an object and the element on the page whose event should trigger the object's function. There are various ways to handle that without exposing anything globally. One way, for example, would be to tie the two via an object's property:

Give the element an ID:

<a id="myLink">Do Something</a>

Add element property to object: 

function myObject(element){
   this.element = element;

   if (this.element) {
      this.element.onclick = this.doSomething;
   }

   this.doSomething = function () {
         // do stuffs.
   }
}

Instantiate object:

var obj = new myObject(document.getElementById('myLink'));

Or simplify the object definition a bit more: 

function myObject(element){
   this.element = element;

   if (this.element) {
      this.element.onclick = function () {
         // do stuffs.
      }
   }
}

Upvotes: 0

jfriend00
jfriend00

Reputation: 707298

To define the problem, you're in a particular object's click handler and you want to call a method on another object in your code that you can't get to directly from the object you're in. You really only have these options and you can just pick the one that seems best or seems the least objectionable:

  1. You can make the object that you want to call a method on be in the global scope.
  2. You can make the object that you want to call a method on be findable in the global scope (either in a parent hierarchy or with some sort of global find). It can be done this way without necessarily adding any more top level objects to the global scope.
  3. You can set the object that you want to call a method as instance data on all objects that will have the click handler so that you can just reference the global object from the click handler object's instance data.
  4. You can declare the click handler to have a parameter that contains your object by using function closures and avoid all global data.

Upvotes: 0

spliter
spliter

Reputation: 12569

You need the object to be in the global scope. Try this:

window.myObject = {
    doSomething: function(action) {
        alert("Done!");
    }
};

and then you make a click event like

<a href="#" onclick="myObject.doSomething()">Do Something</a>

Example

Upvotes: 0

Aliostad
Aliostad

Reputation: 81660

Although it will sit in the global scope, and generally not recommended, you could do this (if you just need to get it working):

function myObject(){
   //How do I reference this function?
   window.doSomething = function (action){ // USE window instead of this !!
        var doing = action;
   }

}

By using window instead of this, it can be called in your handler.

Upvotes: 1

Mrchief
Mrchief

Reputation: 76208

IF the object instance is already created, then you can say:

<a href="#" onclick="obj.doSomething()">Do Something</a>

Otherwise,

<a href="#" onclick="function () { return new myObject().doSomething(); }">Do Something</a>

Upvotes: 0

Related Questions