Use

The following listens to a 'change' event on an element:

var domEvents = require("can-dom-events");
var input = document.createElement('input');

function onChange(event) {
    console.log('Input value changed to:', event.target.value);
}

domEvents.addEventListener(input, 'change', onChange);

Use dispatch to fire custom events:

domEvents.dispatch(input, 'change');

Use addDelegateListener to listen to an event for all elements that match a selector within a root element:

domEvents.addDelegateListener(document.body,"click", "a", function(event){
  event.preventDefault();
});

Finally, you can create your own custom events and add them to the global event registry. First, create an EventDefinition object. For example, the following might implement an "escape" event that listens to when a user presses the Escape key:

var handlerMap = new WeakMap();
var escapeEventDefinition = {
    defaultEventType: 'escape',
    addEventListener: function (target, eventType, handler) {
        var keyHandler = function (event) {
            if (event.keyCode === 27 || event.key === 'Escape') {
                return handler.apply(this, arguments);
            }
        };
        handlerMap.set(handler, keyHandler)
        this.addEventListener(target, baseEventType, keyHandler);
    },
    removeEventListener: function (target, eventType, handler) {
        this.removeEventListener(target, baseEventType, handlerMap.get(handler));
    }
}

Then you can add this custom event to the registry and listen to that event:

import domEvents from "can-dom-events";

domEvents.addEvent(escapeEventDefinition);

var input = document.querySelector("[name=search]");
domEvents.addEventListener(input, "escape", function(){

});