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:

$('#anchor').click(function(){
    console.log('anchor');
});

I'm close to writing a onClick attribute on the element out of frustration, but I would like to understand the link between the jQuery event and DOM element.

How exactly does the element know to fire a jQuery event when the markup itself is not changed? How are they catching the DOM event and overriding it?

I have created my own Observer handler but cant quite understand how to link the element to the Observer events.

Adam Huffman · Accepted Answer · 2016-10-03 17:21:08Z

69

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

edited Oct 3, 2016 at 17:21

Adam Huffman

1,04114 silver badges21 bronze badges

answered Jul 23, 2013 at 20:31

Dan Tao

129k57 gold badges309 silver badges451 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vsr Over a year ago

You can read more about addEventListener here developer.mozilla.org/en-US/docs/Web/API/… Do scroll down to "Legacy Internet Explorer and attachEvent" know about IE<9 support.

user924 Over a year ago

what about hidden elements?

txpeaceofficer09 · Accepted Answer · 2013-07-23 20:47:59Z

10

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.

answered Jul 23, 2013 at 20:47

txpeaceofficer09

1616 bronze badges

Collectives™ on Stack Overflow

Bind event to element using pure Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related