QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Passing Objects To addEventListener

Passing Objects To addEventListener

Passing Objects Usage Scenarios

This can also be helpful if we want to pass arguments to the event handlers.

Sometimes we may want to create event handlers dynamically which are similar to each other. In this case passing different objects to addEventListener can be used to register similar kind of event handler dynamically.

How To?

Let’s see how can we pass objects to addEventListener:

Instead of passing a callback we can directly pass a object with an handleEvent property assigned to an function. Now handleEvent property becomes the event handler.

Supported Browsers

Some older IE browsers don’t support it and also some mobile browsers don’t. This is a polyfill I have written which overrides the functionality of the addEventListener method to support this functionality.

//less then ECMAScript 5 don't support .bind() therefore first polyfill it
Function.prototype.bind=Function.prototype.bind||function(b){if(typeof this!=="function"){throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");}var a=Array.prototype.slice,f=a.call(arguments,1),e=this,c=function(){},d=function(){return e.apply(this instanceof c?this:b||window,f.concat(a.call(arguments)));};c.prototype=this.prototype;d.prototype=new c();return d;};

//now polyfill addEventListener
//override EventTarget.addEventListener
EventTarget.prototype.old_addEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(eventType, obj, bubble){
    if(typeof obj == "function"){
        this.old_addEventListener(eventType, obj, bubble);
    }
    else if(typeof obj == "object" && obj.handleEvent){
        this.old_addEventListener(eventType, obj.handleEvent.bind(obj), bubble);
    }
    else{
        throw e;
    }  
}

Jul 3, 2014Narayan Prusty
Debugging Phonegap AppsObject-Oriented JavaScript Tutorial with Examples

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Passing Objects Usage Scenarios
  • How To?
  • Supported Browsers
Related Articles
  • JavaScript Vibration API with Demo
  • Check if CSS property is supported using CSS and JavaScript
  • Making HTML Underlying Elements Clickable Using pointer-events CSS Property
  • Page Visibility API Tutorial with Example
  • Changing Text Selection Color Using CSS
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license