Description

Methods

on

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 [https://github.com/EightMedia/hammer.js/wiki/Getting-Started](https://github.com/EightMedia/hammer.js/wiki/Getting-Started)

off

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

eventExist

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

hasEvent

If the test element at least one event

trigger

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.

click

Equivalent to the method `.on("click", function)` [More details on here ](?p=core.element.events.on)

dblclick

Equivalent to the method `.on("dblclick", function)` [More details on here ](?p=core.element.events.on)

mouseover

Equivalent to the method `.on("mouseover", function)`. [More details on here ](?p=core.element.events.on)

mouseout

Equivalent to the method `.on("mouseout", function)` [More details on here ](?p=core.element.events.on)

addLoopListener

Adds a function that executes the loop for rendering the element

Discussion