Bind event to element using pure Javascript
Solution 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
Solution 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.
Wancieho
Updated on October 04, 2020Comments
-
Wancieho over 3 years
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.
-
vsr almost 11 yearsYou 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 6 yearswhat about hidden elements?