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

Question

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

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

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

谢谢

Answer 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>

Answer 2

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

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

<button name="buttonName">Click me</button>

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

Answer 3

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

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

How to convert jQuery to JavaScript name attribute