Question

我想在元素级别上只将侦听器添加到HTML按钮，复选框，单选，选择和锚标记（href），而不管元素ID或名称。

意思是，只要点击网页上的任何按钮，复选框，广播，选择或锚标记（href），我想听点击事件。我怎样才能使用javascript实现这一目标。有人可以帮忙！

Answer 1

如果你想使用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
   });
}

Answer 2

原生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>

Answer 3

您只需使用 document.querySelectorAll() 选择页面中的所有可点击元素：

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

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<强> document.querySelectorAll（）

返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

，其中


elementList是元素对象的非实时NodeList。

selectors是一个包含一个或多个CSS选择器的字符串   以逗号分隔。

如何使用addEventListener与所有HTML按钮，复选框，收音机，选择和href

3 个答案: