Started

Selectors

Utilities

Animation

AJAX

CSS

Event

Manipulation

Cookie

String

Attributes

Data

Storage

Miscellaneous

$event.on

Attach event handler function for one or more events to the selected elements.
$event.on( element, type, selector, data, handler )
  1. element [object]
    The target element.
  2. type [string/object]
    DOM event type/Object with type as key and handler as value.
  3. selector (optional) [string]
    simple DOM selector, supported "#", "." and "tag" syntax.
  4. data (optional) [object]
    The data will pass though to the handler.
  5. handler [function]
    The function that will be executed when the event is triggered.

Notes

Qatrix will delegate all event handled by Qatrix event delegator to provide more advanced and compatable function and value. Qatrix also support mouseenter and mouseleave event to increase the mouse event performance.

Example

HTML code
<div id="box-wrap">
	<div id="box" class="box">This is a box</div>
	<div id="box2" class="box">This is box 2 will attach two event</div>

	<div class="class-box">box with class</div>

	<div class="class-box">box with class</div>
</div>
<button onclick="start_attach_event()">Attach onclick event for box</button>
CSS code
.box {
	width: 200px;
	height: 60px;
	font-size: 12px;
	background: #5599bb;
	padding: 10px;
	margin: 5px 0;
}

.class-box {
	width: 200px;
	height: 60px;
	font-size: 12px;
	background: #fcfcfc;
	border: 2px solid #999;
	padding: 10px;
	margin: 5px 0;
}
JavaScript code
var box_event_handler = function ()
{
	alert("You clicked the box");
};

var box_dbclick = function ()
{
	alert("You double clicked the box");
};

var class_box_click = function (event)
{
	// The event object is processed by Qatrix, to get the original event object use
	event.originalEnvent;

	// The target element attached this event
	event.target;

	// The key code indicated which key is pressed.
	event.which;

	// To check meta key (command key on MacOS and Ctrl on PCs) is pressed or not.
	event.metaKey;

	// To prevent event bubble up and disable default event.
	// If return false, Qatrix will also call event.preventDefault
	// and event.stopPropagation automatically.

	// event.preventDefault();
	// event.stopPropagation();
	// event.stopImmediatePropagation();

	// The data passed from $event.on;
	event.data;

	alert(event.data.foo); // Alert bar
};

function start_attach_event()
{
	$event.on($("box"), "click", box_event_handler);

	$event.on($("box2"), {
		click: box_event_handler,
		dbclick: box_dbclick
	});

	// Attach click event to all class="class-box" from id="box-wrap" wrapper and pass {"foo": "bar"} data to handler
	$event.on($("box-wrap"), "click", ".class-box", {"foo": "bar"}, class_box_click);
	
	alert("Onclick event attached. Try to click the box now.");
}
Demonstration
This is a box
This is box 2 will attach two event
box with class
box with class