no-jquery 04 Events

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;
    }
}