How to use addEventListener with all HTML buttons, checkbox, radio, select and href

Question

I would like to add listener only to HTML buttons, checkbox, radio, select and anchor tag(href) on element level, irrespective of element ID or name.

Means, i would like to listen the click event whenever any button, checkbox, radio, select or anchor tag(href) clicked on a webpage. how can i achieve this using javascript. Can somebody help!

Loop through `getElementsByTagName()` or attach event to the `document` then check the element type. — Script47, Aug 29 '17 at 09:43
Possible duplicate of [Javascript attach an onclick event to all links](https://stackoverflow.com/questions/8492344/javascript-attach-an-onclick-event-to-all-links) — Script47, Aug 29 '17 at 09:44
@Script47: But it shows only for a tag but i want the same for select, radio, checkbox and button also. — Green Computers, Aug 29 '17 at 09:49
@GreenComputers You can just use `document.querySelectorAll()` to select all the clickable elements in the page, please check [**my answer**](https://stackoverflow.com/a/45936242/3669624) for further details. — cнŝdk, Aug 29 '17 at 10:13

cнŝdk · Answer 1 · 2017-08-29T12:29:23.350

You can just use document.querySelectorAll() to select all the clickable elements in the page:

document.querySelectorAll("input, button, a, select").forEach(function(el) {
  el.addEventListener("click", function() {
    console.log("clicked");
  });
});

Demo:

document.querySelectorAll("input, button, a, select").forEach(function(el) {
  el.addEventListener("click", function() {
    console.log("clicked");
  });
});

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


<button>Click this button</button>

<input type="button" value="Click it" />


<input type="radio" name="gender" value="male"> Accept<br>
<input type="radio" name="gender" value="female"> Refuse<br>

<label><input type="checkbox"/>Send me notifications</label><br/>
<a href="#">Click the link</a>

document.querySelectorAll()

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

where

elementList is a non-live NodeList of element objects.

selectors is a string containing one or more CSS selectors separated by commas.

Can u add a demo with element. – Green Computers Aug 29 '17 at 11:36 — Green Computers, Aug 29 '17 at 11:36

score 0 · Accepted Answer · answered Aug 29 '17 at 09:54

0

If you want to use jQuery:

$("button, [type='checkbox'], [type='radio'], select, [href]").each(function () {
    $(this).on("click", function () {
        // STUFF
    });
});

If you want to use plain JS:

var things = document.querySelectorAll("button, [type='checkbox'], [type='radio'], select, [href]");

for (var i = 0; i < things.length; i++) {
   things[i].addEventListener("click", function () {
       // STUFF
   });
}

answered Aug 29 '17 at 09:54

masterpreenz

2,280
1
13
21

Instead creating the same event function multiple times (for every element), I would prefer to create it only once and then assign it in the second param of `addEventListener()`. Except... JS is intelligent enough to recognize identical functions and omit creating them in the memory multiple times - I don't know that. – StanE Aug 29 '17 at 10:28
@masterpreenz: It works well for all elements except for [href]. can u confirm me the reason pls.. – Green Computers Aug 29 '17 at 11:35
1

`href` is not an element, but an attribute of the element `a` (anchor tag). Replace the `[href]` with `a`. – StanE Aug 29 '17 at 12:35

Nikola Lukic · Answer 3 · 2018-02-26T22:23:49.063

Native javascript example :

var all_button = document.getElementsByTagName("button")
var all_radio = document.getElementsByTagName("input")
var all_select = document.getElementsByTagName("select")

 
function click () {
 console.log("native")   
}

function ADD_CLICK_EVENT_TO_HTML_TAGS_ARRAY ( _array_ ) {

 for (var i=0; i<_array_.length; i++) {
 
  if (_array_[i].tagName == "input"){
     if (_array_[i].type == "radio" ) { 
        _array_[i].addEventListener("click" , click , false)
     }
  }
  else{
    _array_[i].addEventListener("click" , click , false)
  }
 
 }

}

ADD_CLICK_EVENT_TO_HTML_TAGS_ARRAY ( all_button ) 
ADD_CLICK_EVENT_TO_HTML_TAGS_ARRAY ( all_radio ) 
ADD_CLICK_EVENT_TO_HTML_TAGS_ARRAY ( all_select )

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button type="button">Click Me1!</button>
<button type="button">Click Me2!</button>
<button type="button">Click Me3!</button>

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>

How to use addEventListener with all HTML buttons, checkbox, radio, select and href

3 Answers3