如何将 jQuery 转换为 JavaScript 名称属性答案

【问题标题】：How to convert jQuery to JavaScript name attribute如何将 jQuery 转换为 JavaScript 名称属性
【发布时间】：2019-11-14 10:06:03
【问题描述】：

我正在尝试找到一种方法来为 JS 中动态生成的按钮创建“点击”事件。我知道在 jQuery 中可以这样做：

$(document).on('click', 'name=[buttonName]', function() {});

我知道 JS 中的 e.target 方法，但我想找到一种方法来使用 name 属性来代替。

谢谢

【问题讨论】：

【解决方案1】：

首先，jQuery 的那行不太正确，因为方括号在错误的位置：

$(document).on('click', '[name="buttonName"]', func);

要在普通 JS 中实现相同的效果，您需要将点击事件处理程序附加到静态父元素，然后检查被点击元素的 name 属性：

document.addEventListener('click', function(e) {
  if (e.target.name == 'buttonName') {
    // do something...
  }
});

document.addEventListener('click', function(e) {
  if (e.target.name == 'buttonName') {
    alert('Hello!');
  }
});

<button>I do nothing!</button>
<button name="buttonName">I say hello!</button>

【讨论】：

【解决方案2】：

您可以以与在 jQuery 中类似的方式使用 querySelector，并在将新元素添加到 DOM 时附加事件侦听器。

document.querySelector("button[name='buttonName']").addEventListener("click", function(){
   alert("Hello, World");
});

&lt;button name="buttonName"&gt;Click me&lt;/button&gt;

与原始 jQuery 代码的不同之处在于，在该示例中，它侦听 document 上的事件，而这没有。

【讨论】：

【解决方案3】：

您可以使用 getElementByName 将点击事件添加到动态呈现的按钮

document.getElementByName("ButtonName").addEventListener("click", function(e) {
});

【讨论】：