Bind event to element using pure Javascript

Question

I\'m writing an API and unfortunately need to avoid any jQuery or 3rd party libraries. How exactly are the events bound to elements through jQuery?

jQuery example:

Answer 1

Here's a quick answer:

document.getElementById('anchor').addEventListener('click', function() {
  console.log('anchor');
});

Every modern browser supports an entire API for interacting with the DOM through JavaScript without having to modify your HTML. See here for a pretty good bird's eye view: http://overapi.com/javascript

Answer 2

You identify the element by id, in this case anchor, by:

var el = document.getElementById('anchor');

Then you need to assign your click event:

el[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? 'click' : 'onclick', myClickFunc, false);

And finally, the event's function would be something like:

function myClickFunc()
{
    console.log('anchor');
}

You could simplify it or turn it into a one-liner if you do not need compatibility with older browsers and and a range of browsers, but jQuery does cross-browser compatibility and does its best to give you the functionality you are looking for in as many older browsers as it can.