Events
Sending Native (DOM) Events
anchorElement.click();
Sending Custom Events
var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true); //can bubble, and is cancellable
someElement.dispatchEvent(event);
//modern; not IE
var event = new CustomEvent('my-custom-event', {bubbles: true, cancelable: true});
someElement.dispatchEvent(event);
Listening For Events
//above IE8
someElement.addEventListener('click', function() {
// TODO event handler logic
});
Removing Event Handlers
var myEventHandler = function(event) {
// handles the event...
}
someElement.removeEventListener('click', myEventHandler);
Modifying Events
someEl.addEventListener('some-event', function(event) {
event.stopPropagation();
});
//also prevent other handlers from executing.
someEl.addEventListener('some-event', function(event) {
event.stopImmediatePropagation();
});
someAnchor.addEventListener('click', function(event) {
event.preventDefault();
});
Event Delegation
document.getElementById('my-list').addEventListener('click', function(event) {
var clickedEl = event.target;
if(clickedEl.tagName === 'BUTTON') {
var listItem = clickedEl.parentNode;
listItem.parentNode.removeChild(listItem);
}
});
Keyboard Events
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.which === 72) {
// open help widget
}
});
//or
someElement.addEventListener('keypress', function(event) {
// ...
});
someElement.addEventListener('keyup', function(event) {
// ...
});
Mouse Events
someEl.addEventListener('mouseover', function() {
// mouse is hovering over this element
});
someEl.addEventListener('mouseout', function() {
// mouse was hovering over this element, but no longer is
});
Browser Load Events
window.addEventListener('load', function() {
// page is fully rendered
});
document.addEventListener('DOMContentLoaded', function() {
// markup is on the page
});
//<img>, <link>, and <script>.
img.addEventListener('load', function() {
// image has successfully loaded
});
//And if the image should fail to load?
img.addEventListener('error', function() {
// image has failed to load
});
Ancient Browser Support
Listening For Events
someElement.attachEvent('onclick', function() {
// TODO event handler logic
});
//complex
function registerHandler(target, type, callback) {
var listenerMethod = target.addEventListener || target.attachEvent,
eventName = target.addEventListener ? type : 'on' + type;
listenerMethod(eventName, callback);
}
// example use
registerHandler(someElement, 'click', function() {
// TODO event handler logic
});
function unregisterHandler(target, type, callback) {
var removeMethod = target.removeEventListener || target.detachEvent,
eventName = target.removeEventListener ? type : 'on' + type;
removeMethod(eventName, callback);
}
// example use
unregisterHandler(someElement, 'click', someEventHandlerFunction);
The Event Object
function myEventHandler(event) {
var target = event.target || event.srcElement
// handle event & target
}
function myEventHandler(event) {
if (event.stopPropgation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}