simple-custom-event v1.0.1
Simple Custom Event
Simple and easy to use custom event implementation with optional
EventTarget element.
Features
- Easy installation and usage
EventTargetis not required- Internet Explorer 9+ is supported (polyfill included)
Installation
via Yarn
yarn add simple-custom-eventvia NPM
npm install simple-custom-eventvia CDN
<script src="//unpkg.com/simple-custom-event@1.0.1"></script>Usage
Sample of usage where we are creating MY_CUSTOM_EVENT event and triggering it with some optional data.
javascript (ES6+)
after Yarn/NPM installation
import SimpleCustomEvent from 'simple-custom-event'
const myEvents = new SimpleCustomEvent()
myEvents.on('MY_CUSTOM_EVENT', (data) => {
console.log(data.detail)
})
myEvents.trigger('MY_CUSTOM_EVENT', {myOptionalData: 'eg some string'})typescript
after Yarn/NPM installation
import SimpleCustomEvent from 'simple-custom-event'
const myEvents = new SimpleCustomEvent()
myEvents.on('MY_CUSTOM_EVENT', (data: CustomEvent) => {
console.log(data.detail)
})
myEvents.trigger('MY_CUSTOM_EVENT', {myOptionalData: 'eg some string'})javascript (ES5+)
with CDN
<!doctype html>
<html lang="en">
<head>
<title>Simple Custom Event</title>
</head>
<body>
<script src="//unpkg.com/simple-custom-event@1.0.1"></script>
<script>
var myEvents = new SimpleCustomEvent()
myEvents.on('MY_CUSTOM_EVENT', function(data) {
console.log(data.detail)
})
myEvents.trigger('MY_CUSTOM_EVENT', {myOptionalData: 'eg some string'})
</script>
</body>
</html>Multi instances
Events simplifies the communication between components of application. Decouples event senders and receivers.
Below simple example with multi instances of SimpleCustomEvent class:
file-1.js (ES6):
import SimpleCustomEvent from 'simple-custom-event'
const myEvtListener = new SimpleCustomEvent()
myEvtListener.on('MY_CUSTOM_EVENT', () => {
// do something...
})file-2.js (ES6):
import SimpleCustomEvent from 'simple-custom-event'
const myEvtEmiter = new SimpleCustomEvent()
myEvtEmiter.trigger('MY_CUSTOM_EVENT')Methods
All available, public methods of SimpleCustomEvent class:
constructor([target])Initializes an object.targetType: EventTarget DOM interface implemented by objects that can receive events and may have listeners for them. Default: document
.trigger(eventName[, detail])Initializes and dispatches an custom Event, invoking the affected Listeners..on(eventName, callback)Sets up a function that will be called whenever the specified event is triggered.eventNameType: string Custom event name to listen for.callbackType: EventListenerOrEventListenerObject Callback function accepts a parameter: Event object describing the event which has occurred.
.off(eventName)Removes an event listener previously registered with.on().eventNameType: string Custom event name for which to remove an event listener.
Contributing
Can you improve this simple project? Feel free to join it! Source code is TypeScript.
# project setup
yarn install
# compiles for development
yarn dev
# or
yarn dev:watch
# run unit tests
yarn testLicense
Code released under the MIT license.