Simple and easy to use custom event implementation with optional
EventTarget element.
- Easy installation and usage
EventTargetis not required- Internet Explorer 9+ is supported (polyfill included)
yarn add simple-custom-eventnpm install simple-custom-event<script src="//unpkg.com/simple-custom-event@1.0.1"></script>Sample of usage where we are creating MY_CUSTOM_EVENT event and triggering it with some optional data.
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'})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'})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>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')All available, public methods of SimpleCustomEvent class:
-
constructor([target])
Initializes an object.target
Type: 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.eventName
Type: string
Custom event name to listen for.callback
Type: EventListenerOrEventListenerObject
Callback function accepts a parameter: Event object describing the event which has occurred.
-
.off(eventName)
Removes an event listener previously registered with.on().eventName
Type: string
Custom event name for which to remove an event listener.
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 testCode released under the MIT license.