So maybe I'm just not looking in the right places but I can't find a good explanation of how to do the equivalent of jQuery's
$('a').click(function(){
// code here
});
in plain old JavaScript?
Basically I want to run a function every time an a tag is clicked but I don't have the ability to load jQuery into the page to do it in the way above so I need to know how to do it using plain JavaScript.
element.addEventListener('click', function() { ... }, false);
You have to locate the elements and make a loop to hook up each one.
Working Example: http://jsfiddle.net/6ZNws/
Html
<a href="something">CLick Here</a>
<a href="something">CLick Here</a>
<a href="something">CLick Here</a>
Javascript:
var anchors = document.getElementsByTagName('a');
for(var z = 0; z < anchors.length; z++) {
var elem = anchors[z];
elem.onclick = function() {
alert("hello");
return false;
};
}
document.getElementById('elementID').onclick = function(){
//click me function!
}
Try the following
var clickHandler = function() {
// Your click handler
};
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var current = anchors[i];
current.addEventListener('click', clickHandler, false);
}
Note: As Ӫ_._Ӫ pointed out this will not work on IE8 and lower as it doesn't support addEventListener.
On IE8 you could use the following to subscribe to onclick. It's not a perfect substitute as it requires everyone to be cooperative but it may be able to help you out
var subscribeToOnClick = function(element) {
if (element.onclick === undefined) {
element.onclick = clickHandler;
} else {
var saved = element.onclick;
element.onclick = function() {
saved.apply(this, arguments);
clickHandler.apply(this, arguments);
}
}
}
for (var i = 0; i < anchors.length; i++) {
var current = anchors[i];
subscribeToOnClick(current);
}
addEventListener.attachEvent, but it doesn't accept the 3rd argument to set bubbling/capturing (bubbling is default), and it doesn't set this as the element that invoked the handler, but there are workarounds for that using closures.Here you go:
[].forEach.call( document.querySelectorAll( 'a' ), function ( a ) {
a.addEventListener( 'click', function () {
// code here
}, false );
});
Live demo: http://jsfiddle.net/8Lvzc/3/
(doesn't work in IE8)
Also, I recommend event delegation...
[].forEach.call(...)?
call isn't suitable since a function has to be passed into forEach. One would have to use apply, so: [].forEach.apply( ..., [ function () {} ] );. The [ function () {} ] notation is a bit to strange for my taste...I just stumbled upon this old question.
For new browsers (find support here: https://caniuse.com/?search=querySelectorAll)
My solution would be:
function clickFunction(event) {
// code here
}
for (let elm of document.querySelectorAll("a")) {
elm.addEventListener('click', clickFunction);
}
This is optimized to not create a new function for each element. This will add an "click" eventListener to each element, so if you do this more than once, several eventListeners for each element will be called.
To replace/set the "click" eventListener use the following code:
for (let elm of document.querySelectorAll("a")) {
elm.onclick = clickFunction;
}
Will work on IE9 and up.
This will assign an onclick function to every a element.
var links = document.getElementsByTagName("a");
var linkClick = function() {
//code here
};
for(var i = 0; i < links.length; i++){
links[i].onclick = linkClick;
}
You can see it in action here.
