Gaining entry to a JavaScript prototype method

Question

Gaining entry to a JavaScript prototype method

I'm currently working on a prototype function called event.

Prototype

Func("input_element_id").event("keyup",function(){
    alert("Works on keyup in an Input!");
}

Func.prototype= {
    keyup: function(func){
         //adding event listener and callback using func
    },
    event: function(e,func) {
         //what to do here to call function "keyup"
    }
};

The prototype name is stored in the variable e. Now, I'm trying to figure out how to call that particular function using the variable name.

I am experimenting with this approach in order to allow passing "keyup keydown" as arguments to add keyup and keydown listeners simultaneously, instead of calling each prototype function individually.

Your insights would be greatly appreciated. Thanks!

javascript function input prototype

Answer 1

Answer №1

const FunctionObj = function(elem){
  this.elem = elem;
};

FunctionObj.prototype = {
    addKeyupListener: function(handler){
      this.elem.onkeyup = handler;
    },
    addEventListener: function(event, handler){
        switch(event){
            case 'keyup':
              return this.addKeyupListener(handler);
            break;
        }
    }
}

http://jsfiddle.net/YDekw/

Answer 2

const FunctionObj = function(elem){
  this.elem = elem;
};

FunctionObj.prototype = {
    addKeyupListener: function(handler){
      this.elem.onkeyup = handler;
    },
    addEventListener: function(event, handler){
        switch(event){
            case 'keyup':
              return this.addKeyupListener(handler);
            break;
        }
    }
}

http://jsfiddle.net/YDekw/

Answer 3

Answer №2

To access the receiving object, use the keyword this.

this.keypress(func);

If you have a modern browser or an ES5 shim installed, here is how you can achieve this:

e.split(" ").forEach(function(item) {
    this[item](func);
}, this);

Keep in mind that it refers to the object being used with the dot operator and can vary based on context. For instance:

var obj = new Obj("input_id");
window.action = obj.action;
window.action(); // in this case, 'this' refers to window

Answer 4

To access the receiving object, use the keyword this.

this.keypress(func);

If you have a modern browser or an ES5 shim installed, here is how you can achieve this:

e.split(" ").forEach(function(item) {
    this[item](func);
}, this);

Keep in mind that it refers to the object being used with the dot operator and can vary based on context. For instance:

var obj = new Obj("input_id");
window.action = obj.action;
window.action(); // in this case, 'this' refers to window

Answer 5

Answer №3

A proven method to reach this goal is through:

events: function(events,func) {
            this[events](func);
        }
    }

Credit goes to CrazyTrain, as highlighted in the Comments.

Answer 6

A proven method to reach this goal is through:

events: function(events,func) {
            this[events](func);
        }
    }

Credit goes to CrazyTrain, as highlighted in the Comments.

Gaining entry to a JavaScript prototype method

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered with Passport js Local Strategy: The LocalStrategy necessitates a verify callback function

Having some trouble implementing the functionality of hiding a data series in HighCharts using `{ data: [], visible: false }` notation

Tips for enabling autofocus in mat-select列表。

Display Quantity of Current Website Visitors

execute a function for every regex match found within a string

Request successful but receiving no response text and content length is zero

What events precede and follow a keydown action in a Textarea field?

Scroll the content of a div to the bottom using JavaScript

Encountering an issue with resolving the module - Material-UI

Having trouble bringing my custom-built Angular module into my Angular application

The perplexing actions of Map<string, string[]> = new Map() have left many scratching their heads

Confusion surrounding asynchronous functions in Node.js

Exploring the world of typescript with the power of ts-check

Click on the text within a paragraph element

Analyzing file data while uploading the file

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

Interacting with a form input by triggering the onChange event

Modifying the content within a DIV element

Utilizing JavaScript For Loops for Code Repetition

Tips for adding style to a group of SVG elements: