DoneJS StealJS jQuery ++ FuncUnit DocumentJS
3.0.0
2.3.27

 

  • Github
  • Twitter
  • Chat
  • Forum
  • Guides
  • Core
  • Ecosystem
  • Infrastructure
    • can-construct
    • can-control
    • can-event
      • static
        • addEventListener
        • bind
        • delegate
        • dispatch
        • listenTo
        • off
        • on
        • one
        • removeEventListener
        • stopListening
        • trigger
        • unbind
        • undelegate
    • can-event/async/async
    • can-event/batch/batch
    • can-observation
    • can-simple-map
    • can-util
    • can-view-callbacks
    • can-view-live
    • can-view-model
    • can-view-nodelist
    • can-view-parser
    • can-view-scope
    • can-view-target
  • Legacy
  • Bitovi
    • Bitovi.com
    • Blog
    • Consulting
    • Training
    • Open Source
  • Chat
  • Forum
  • Star
  • Follow @canjs
  • CanJS
  • /
  • Infrastructure
  • /
  • can-event
  • / On this page
    • can-event

      module

      Add event functionality into your objects.

      The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent.

      All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events.

      • npm package badge
      • Star
      • source

      assign(YourClass.prototype, canEvent)

      Adds event functionality to YourClass objects. This can also be applied to normal objects: assign(someObject, canEvent).

      The assign function can be any function that assigns additional properties on an object such as Object.assign or lodash's _.assign or assign.

      var assign = require("can-util/js/assign/assign");
      var canEvent = require("can-event");
      
      function Thing(){
      
      }
      
      assign(Thing.prototype, canEvent);
      
      var thing = new Thing();
      thing.addEventListener("prop", function(){ ... });
      

      Using as a mixin

      The easiest way to add events to your classes and objects is by mixing can-event into your object or prototype.

      var SomeClass = Construct("SomeClass", {
          init: function() {
              this.value = 0;
          },
          increment: function() {
              this.value++;
              this.dispatch("change", [this.value]);
          }
      });
      Object.assign(SomeClass.prototype, canEvent);
      

      Now that canEvent is included in the prototype, we can add/remove/dispatch events on the object instances.

      var instance = new SomeClass();
      instance.on("change", function(ev, value) {
          alert("The instance changed to " + value);
      });
      
      // This will dispatch the "change" event and show the alert
      instance.increment();
      

      Using without mixing in

      The same event functionality from canEvent can be used, even if the given object doesn't include canEvent. Every method within canEvent supports being called with an alternate scope.

      var obj = {};
      
      canEvent.addEventListener.call(obj, "change", function() {
          alert("object change!");
      });
      
      // This will dispatch the "change" event and show the alert
      canEvent.dispatch.call(obj, "change");
      

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