QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license