The `on` method attaches event handlers to the currently selected set of elements in the CanvasEngine object. ## General Event ## Some names are defined as follows: `namespace:eventname`. For example, there are the following event in CanvasEngine: stage.on("canvas:refresh", function(el) { // stage is defined in the scene console.log(el); }); At each refresh of the scene, to display each element is returned. * `canvas:refresh` Calling the event *only* `stage` to each refresh of an element * `canvas:render` Call each rendering the element * `canvas:readyEnd` Call at the end of the execution of the `ready` method in the scene * `element:attrChange` `(>=1.3.2)` Called when an attribute of an element is changed el.on("element:attrChange", function(name, value) { if (name == "my_attr") { console.log("new value : " + value); } }); el.attr("my_attr", "foo"); * `animation:draw` Call each sequence. Id parameter sequence el.on("animation:draw", function(id) { console.log(id); }); ## Mouse Events You can retrieve the mouse events * click * dbclick * mousemove * mouseup * mousedown * mouseout * mouseover > For `mouseover` and `mouseout`, you must give size to the element (in `ready` method) var el = this.createElement(300, 300); > or var el = this.createElement(); el.width = 300; el.height = 300; WebCreative5/Y9Kum Apply on a specific element : var el = this.createElement(); el.on("click", function(e, mouse) { this.opacity = 0.5; }); ** Callback parameter ** * event {Event} : a mouse event * mouse {Object} `(>= 1.2.6)` : Position the mouse on the canvas. `{x: , y: }` Example : stage.on("mousemove", function(e, mouse) { console.log(mouse.x, mouse.y); }); ## Events with Hammer.js ## Other events suitable for tablet and smartphone exist available in Hammer.js : * hold * tap * doubletap * drag, dragstart, dragend, dragup, dragdown, dragleft, dragright * swipe, swipeup, swipedown, swipeleft, swiperight * transform, transformstart, transformend * rotate * pinch, pinchin, pinchout * touch (gesture detection starts) * release (gesture detection ends) var el = this.createElement(); el.on("drag", function(e, mouse) { this.x = e.distanceX; this.y = e.distanceY; }); > If you use the `click` event, it will be replaced by `touch` for touch devices See [](


The off() method removes event handlers that were attached with .on()


Test whether an event is present on the element. Return true if exist


If the test element at least one event


Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method.


Equivalent to the method `.on("click", function)` [More details on here ](?


Equivalent to the method `.on("dblclick", function)` [More details on here ](?


Equivalent to the method `.on("mouseover", function)`. [More details on here ](?


Equivalent to the method `.on("mouseout", function)` [More details on here ](?


Adds a function that executes the loop for rendering the element