DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
        • static
          • addDelegateListener
          • addEvent
          • addEventListener
          • dispatch
          • removeDelegateListener
          • removeEventListener
        • types
          • EventDefinition
          • DomEventTarget
        • helpers
          • ./helpers/add-jquery-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

can-dom-events

  • npm package badge
  • Star
  • Edit on GitHub

Listen to DOM events and special events, and register special events.

EventRegistry

The can-dom-events module exports the global event registry. Use it to listen to DOM events on HTML elements. Any custom event types added to this registry are available to every other part of CanJS.

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(){

});

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news