jQuery 的香草 JavaScript 版本 .click

Posted 2023-02-19

【中文标题】jQuery 的香草 JavaScript 版本 .click

【英文标题】：Vanilla JavaScript version of jQuery .click

【发布时间】：2011-11-25 06:34:44

【问题描述】：

所以也许我只是没有在正确的地方寻找，但我找不到一个很好的解释来说明如何做相当于 jQuery 的操作

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

在普通的旧 javascript 中？

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

【参考方案1】：

给你：

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

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

（不适用于 IE8）

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

【讨论】：

你有理由不使用[].forEach.call(...)吗？

@pimvdb 好吧，call 不合适，因为必须将函数传递给 forEach。必须使用apply，所以：[].forEach.apply( ..., [ function () ] );。 [ function () ] 符号对我来说有点奇怪......

【参考方案2】：

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

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

【参考方案3】：

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

【讨论】：

啊...应该指出我不会预先知道'a'标签或ID，所以只需说“对于点击的任何标签.....”

【参考方案4】：

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

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

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

你可以在here看到它。

【参考方案5】：

试试下面的

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

【讨论】：

不要在循环内创建函数。最好在循环外创建函数，在循环内引用函数。

@PeterOlson 主要是我试图复制原始问题的风格。在这个意义上，我会更新它以更正确

应该注意IE8及以下不支持addEventListener。

@Ӫ_._Ӫ IE8 的替代方案是什么？

嗯，没有确切的替代方案。他们确实有attachEvent，但它不接受第三个参数来设置冒泡/捕获（冒泡是默认的），它没有将this 设置为调用处理程序的元素，但有一些使用闭包的解决方法。

【参考方案6】：

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

【讨论】：

我不同意。恕我直言，您可能会破坏以前的绑定功能。我认为使用“addEventListener”要好得多。

【参考方案7】：

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

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

我的解决方案是：

function clickFunction(event) 
  // code here


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

优化后不会为每个元素创建新函数。

适用于 IE9 及更高版本。

【讨论】：

它更易于阅读，但并未进行任何优化。您仍然有效地循环遍历 a 元素的数组。 For loops are faster than forEach

你是对的！我被一些阅读分散了注意力。更流畅的解决方案是使用 for of 循环。 （编辑我的解决方案），

这很酷，但我注意到它会覆盖任何现有的 onclick 处理程序