Qatrix

$event.add

1. element [object]

   The target element.

2. type [string/object]

   DOM event type/Object with type as key and handler as value.

3. handler [function]

   The function that will be executed when the event is triggered.

Notes

The replacement of addEventListener or attachEvent to attach event handler for element. Qatrix also support mouseenter and mouseleave event to increase the mouse event performance.

Example

HTML code

<div id="box">This is a box</div>
<div id="box2">This is box 2 will attach two event</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;
}

JavaScript code

var box_event_handler = function ()
{
	alert( "You clicked the box" );
};
var box_dbclick = function ()
{
	alert( "You double clicked the box" );
};
function start_attach_event()
{
	$event.add($("box"), "click", box_event_handler);
	$event.add($("box"), {
		click: box_event_handler,
		dbclick: box_dbclick
	});
	
	alert("Onclick event attached. Try to click the box now.");
}

Demonstration