Я хотел бы добавить слушателя только к кнопкам HTML, флажкам, радио, селекту и привязке тега (href) на уровне элемента, независимо от идентификатора элемента или имени.

Значит, я хотел бы слушать событие нажатия, когда какая-либо кнопка, флажок, радио, выбор или привязка тега (href) нажимаются на веб-странице. Как я могу добиться этого с помощью JavaScript. Может кто-нибудь помочь!

2
Green Computers 29 Авг 2017 в 12:41

2 ответа

Лучший ответ

Если вы хотите использовать jQuery:

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

Если вы хотите использовать обычный 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
   });
}
0
masterpreenz 29 Авг 2017 в 09:54

Пример нативного JavaScript:

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>
0
Nikola Lukic 26 Фев 2018 в 22:23