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

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

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

3 ответа

Лучший ответ

Если вы хотите использовать 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

Вы можете просто использовать document.querySelectorAll() , чтобы выбрать все интерактивные элементы на странице:

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

< Сильный > Демо :

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 ( )

Возвращает список элементов в документе (с использованием обхода предварительного порядка узлов документа) по глубине, которые соответствуют указанной группе селекторов. Возвращенный объект - это NodeList.

где

  • elementList - это неживой NodeList объектов-элементов.
  • селекторы - это строка, содержащая один или несколько селекторов CSS разделенных запятыми.
1
cнŝdk 29 Авг 2017 в 12:29