Create JavaScript custom event

by

Perhaps something like this?

function OnPrinterStateChanged(state) {
    var evt = new CustomEvent('printerstatechanged', { detail: state });

    window.dispatchEvent(evt);
}


//Listen to your custom event
window.addEventListener('printerstatechanged', function (e) {
    console.log('printer state changed', e.detail);
});

An alternative solution would be to use function composition, but then it would be hard to remove specific listeners.

function OnPrinterStateChanged(state) {}

function compose(fn1, fn2) {
    return function () {
        fn1.apply(this, arguments);
        fn2.apply(this, arguments);
    };
}

//Add a new listener
OnPrinterStateChanged = compose(OnPrinterStateChanged, function (state) {
    console.log('listener 1');
});

//Add another one
OnPrinterStateChanged = compose(OnPrinterStateChanged, function (state) {
     console.log('listener 2');
});

EDIT:

Here’s how you can do it with jQuery.

function OnPrinterStateChanged(state) {
    var evt = $.Event('printerstatechanged');
    evt.state = state;

    $(window).trigger(evt);
}


//Listen to your custom event
$(window).on('printerstatechanged', function (e) {
    console.log('printer state changed', e.state);
});

More Related Contents:

  1. event.preventDefault() function not working in IE
  2. JavaScript: remove event listener
  3. What is the difference between the mouseover and mouseenter events?
  4. Difference between “change” and “input” event for an `input` element
  5. Resize event for textarea?
  6. Attach a body onload event with JS
  7. Detecting when Iframe content has loaded (Cross browser)
  8. Changing the keypress
  9. Socket.io Client: respond to all events with one handler?
  10. jQuery prevent change for select
  11. adding event listener cross browser [closed]
  12. Detect double tap on ipad or iphone screen using javascript
  13. How to detect if DOMContentLoaded was fired
  14. blur event.relatedTarget returns null
  15. Handling “onclick” event with pure JavaScript
  16. Event when input value is changed by JavaScript?
  17. Monitor all JavaScript events in the browser console
  18. How to clone or re-dispatch DOM events?
  19. How can I stop an onclick event from firing for parent element when child is clicked?
  20. Capture event onclose browser
  21. List all javascript events wired up on a page using jquery
  22. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  23. Listen for changes with localStorage on the same window
  24. Set variable in parent window from iframe
  25. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  26. Angular 2 Hover event
  27. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  28. Fire oninput event with jQuery
  29. How to capture browser close event?
  30. Javascript Event Handler for Print

Leave a Comment