Skip to content
This repository has been archived by the owner. It is now read-only.
main
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

EventListener polyfill

This tiny polyfill aims to add the once and passive event listener options to IE11 and Edge.

For more on those options, read the mdn documentation on EventListener

Usage

The main file is a UMD wrapper, so if you use requirejs, commonjs, or no module system you can load it in:

require.js

define('mymodule', ['eventlistener-polyfill'], function (polyfillEventTarget) {
  // While the polyfill will automatically try to polyfill EventTarget, you may
  // want to polyfill another class
  polyfillEventTarget(MyCustomEventTarget)
})

commonjs

// Just requiring the file is enough to register the polyfill
require('eventlistener-polyfill')


// While the polyfill will automatically try to polyfill EventTarget, you may
// want to polyfill another class
const polyfillEventTarget = require('eventlistener-polyfill')
polyfillEventTarget(MyCustomEventTarget)

no module system

<script src="node_modules/eventlistener-polyfill/index.js"></script>
<script>
  // While the polyfill will automatically try to polyfill EventTarget, you may
  // want to polyfill another class
  window.polyfillEventTarget(MyCustomEventTarget)
</script>

Details

Detecting Support

We detect support for once and passive by making an object with getters for those options. If the browser were to retrieve those values, the getters would trigger and we would know the browser would (in some way) support them. This is working successfully for now - our tests pass in the browsers weve tested, even those where the polyfill is disabled.

The once implementation

When passing once: true as an option, this polyfill simply wraps your callback in a function which calls removeEventListener. You don't need to do anything special here - and removeEventListener still works if you call it manually.

The passive implementation

passive: true is meant to hint to the browser to optimise these EventListeners, at the sacrifice of being unable to run preventDefault. In browsers where this works, running preventDefault will log an error to the console. This polyfill will not log anything to the console - as it is expected you'll be doing your own cross browser testing and notice this elsewhere. However, just in case, this polyfill does turn preventDefault into a noop.

About

Polyfills EventListener behaviours from IE11 onward

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.