jQuery .click 的原生 JavaScript 版本

Vanilla JavaScript version of jQuery .click

提问by Duck in Custard

So maybe I'm just not looking in the right places but I can't find a good explanation of how to do the equivalent of jQuery's

所以也许我只是没有找对地方，但我找不到关于如何做 jQuery 的等价物的很好的解释

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

in plain old JavaScript?

在普通的旧 JavaScript 中？

Basically I want to run a function every time an atag is clicked but I don't have the ability to load jQuery into the page to do it in the way above so I need to know how to do it using plain JavaScript.

基本上，我想在每次a点击标签时运行一个函数，但我无法将 jQuery 加载到页面中以按照上述方式执行此操作，因此我需要知道如何使用纯 JavaScript 执行此操作。

回答by Kevin Bowersox

Working Example: http://jsfiddle.net/6ZNws/

工作示例：http: //jsfiddle.net/6ZNws/

Html

html

<a href="something">CLick Here</a>
<a href="something">CLick Here</a>
<a href="something">CLick Here</a>

Javascript:

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

回答by Diodeus - James MacFarlane

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

You have to locate the elements and make a loop to hook up each one.

你必须找到元素并制作一个循环来连接每个元素。

回答by JaredPar

Try the following

尝试以下

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

Note: As ?_._? pointed out this will not work on IE8 and lower as it doesn't support addEventListener.

注：如?_._? 指出这不适用于 IE8 及更低版本，因为它不支持addEventListener.

On IE8 you could use the following to subscribe to onclick. It's not a perfect substitute as it requires everyone to be cooperative but it may be able to help you out

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

回答by Naftali aka Neal

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

回答by ?ime Vidas

Here you go:

干得好：

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

Live demo:http://jsfiddle.net/8Lvzc/3/

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

(doesn't work in IE8)

（不适用于 IE8）

Also, I recommend event delegation...

另外，我推荐事件委托......

回答by Peter Olson

This will assign an onclickfunction to every aelement.

这将为onclick每个a元素分配一个函数。

var links = document.getElementsByTagName("a");
var linkClick = function() {
  //code here
};

for(var i = 0; i < links.length; i++){
  links[i].onclick = linkClick;
}

You can see it in action here.

你可以在这里看到它的实际效果。