trigger()

Trigger all events added to the canvas or a display object with the passed in event type.

Description

Trigger all events added to the canvas or a display object with the passed in event type.

Arguments

type : String

Event types that handlers will be triggered for. If multiple types are specified, separate them by a space. This can since version 2.5.0 be any name (if it's not one of the built-in types, it will be treated as a custom event).

eventObject : Object (since version 2.5.0)

Optional. An object that will be passed with the event to all listeners. This object will be placed in the originalEvent property of the final event object. See example 3 in the bottom of this page.

Return Value

Core / displayObject. Returns the instance itself, which type depends on if the method was called on the core instance or a display object.

Examples

Example 1

First we create an instance of the core object. Then we add an event handler for the click event, that will change the background color. We also add a handler for the mousemove event that will trigger all click handlers that are added to the canvas, which will change the background color when the mouse is moved over the canvas.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

canvas.bind("click tap", function () {
	canvas.background.set("hsl(" + Math.random() * 360 + ", 50%, 50%)");
});

canvas.bind("mousemove touchmove", function () {
	this.trigger("click tap");
});

Example 2

We create a new core instance and a rectangle that we add to the canvas. Then we add an event handler, that will change the fill color of the rectangle when it is clicked. We also add a handler for the mousemove event that will trigger all click handlers that are added to the rectangle, which will change the fill color when the mouse is moved over the object.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 150,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.bind("click tap", function handler () {
	this.fill = "hsl(" + Math.random() * 360 + ", 50%, 50%)";
	canvas.redraw();
});

rectangle.bind("mousemove touchmove", function () {
	this.trigger("click tap");
});

Example 3

We can bind to custom events with any name. Triggering an event with a custom name will call all listeners for that event like any of the normal events. As you can see in the bottom of the code sample you can see that we can also pass a custom event object to the listeners. In this example it is used to pass a specific color to the event listener.

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#ccc"
});

var rectangle = canvas.display.rectangle({
	x: 77,
	y: 150,
	width: 200,
	height: 100,
	fill: "#000"
});

canvas.addChild(rectangle);

rectangle.bind("update-color", function handler (event) {
	var eventObject = event.originalEvent;
	var color = eventObject ? eventObject.color :
	    "hsl(" + Math.random() * 360 + ", 50%, 50%)";
	this.fill = color;
	canvas.redraw();
});

rectangle.bind("click tap", function () {
	this.trigger("update-color");
});

rectangle.bind("dblclick dbltap", function () {
	this.trigger("update-color", {color: "#000"});
});