香草JavaScript版本的jQuery .click

Question

可能是我找错地方了我找不到一个很好的解释来说明如何实现jQuery的

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

在普通的旧JavaScript?

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

Answer 1

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

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

Answer 2

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

注: As Ӫ_。_Ӫ指出这将不能在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);
}

这被优化为不为每个元素创建新函数。这将添加一个"点击"每个元素的eventListener，所以如果你多次这样做，每个元素的几个eventListener将被调用。

要替换/设置"eventListener使用以下代码:

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

可在IE9及以上版本运行

Answer 7

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

var links = document.getElementsByTagName("a");
var linkClick = function() {
  //code here
};
for(var i = 0; i < links.length; i++){
  links[i].onclick = linkClick;
}

你可以在这里看到它的作用