Vanilla JavaScript版jQuery .click

Question

所以也许我只是没有找到合适的地方,但我找不到如何做相当于jQuery的一个很好的解释

$('a').click(function(){
    // code here
});

在简单的旧JavaScript？

基本上我想在每次a单击标签时运行一个函数,但是我没有能力将jQuery加载到页面中以上面的方式执行它所以我需要知道如何使用纯JavaScript来完成它.

Answer 1

工作示例: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;
    };
}

Answer 2

element.addEventListener('click', function() { ... }, false);

你必须找到元素并创建一个循环来连接每个元素.

Answer 3

请尝试以下方法

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);
}

注意:由于Ӫ_._Ӫ指出这不适用于IE8,因为它不支持addEventListener.

在IE8上,您可以使用以下订阅onclick.它不是一个完美的替代品,因为它需要每个人合作,但它可能能够帮助你

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);
}

Answer 4

document.getElementById('elementID').onclick = function(){
      //click me function!
}

Answer 5

干得好:

[].forEach.call( document.querySelectorAll( 'a' ), function ( a ) {
    a.addEventListener( 'click', function () {
        // code here
    }, false );
});

现场演示: http ://jsfiddle.net/8Lvzc/3/

(在IE8中不起作用)

另外,我建议事件授权......

Answer 6

我刚刚偶然发现了这个老问题。

对于新浏览器（在此处查找支持：https://caniuse.com/? search=querySelectorAll ）

我的解决方案是：

function clickFunction(event) {
  // code here
}

for (let elm of document.querySelectorAll("a")) {
  elm.addEventListener('click', clickFunction);
}

经过优化，不会为每个元素创建新函数。这将为每个元素添加一个“单击”事件监听器，因此如果多次执行此操作，每个元素的多个事件监听器将被调用。

要替换/设置“单击”事件监听器，请使用以下代码：

for (let elm of document.querySelectorAll("a")) {
  elm.onclick = clickFunction;
}

适用于 IE9 及更高版本。