如何使用 eventlistener 在 javascript 中添加多个 id？答案

【问题标题】：How to add multiple id in javascript with eventlistener?如何使用 eventlistener 在 javascript 中添加多个 id？
【发布时间】：2021-01-30 10:22:27
【问题描述】：

我有一个包含姓名、姓氏、电话和其他字段的表格。所有字段都有唯一的 ID 和名称。现在我有这个代码来禁用字段中的英语类型并向用户发出警报以更改键盘。但我不能添加多个 id 到这个

示例：我有两个 id > #name 和 #phone 的字段。我想打电话给这个ID： document.getElementById('name phone') 但上面的代码不起作用并显示“无法读取属性 addEventListener”。

我的代码：

    document.getElementById('name').addEventListener('keypress',function(e){

         if ((e.charCode >= 97 && e.charCode <= 122) || (e.charCode>=65 && e.charCode<=90)){
            alert("لطفا فارسی تایپ کنید");
            e.preventDefault();
        }

    });

    function isPersian(str){
        var p = /^[\u0600-\u06FF\s]+$/;
        return p.test(str);
    }

<input type="text" name="firstname" id="name" class="field form-control" placeholder="Your name">
<input type="text" name="lastname" id="inputLastName" class="field form-control" placeholder="Last name">
<input type="tel" name="phonenumber" id="phone" class="field form-control" placeholder="Phone Number">

【问题讨论】：

给你的元素一个类，然后使用getElementsByClassName并循环遍历每个元素，为每个元素添加你的事件监听器

标签： javascript addeventlistener getelementbyid getelementsbyname

【解决方案1】：

您对事物的运作方式做出了一些错误的假设。

首先，getElementById() 执行它在锡上所说的 - 它得到一个元素（单数），而不是节点列表。它不接受多个 ID，它接受一个。这就是为什么：

document.getElementById('name phone')

或任何其他指定多个 ID 的方法将导致该方法返回 null。你需要：

document.querySelectorAll('#name, #phone')

但是，它返回一个节点列表，而addEventListener() 是 HTML 元素对象的一个方法，而不是节点列表对象，所以你不能在那里运行它并期望它将事件绑定到所有返回的元素。

你有两个选择：

1 遍历节点列表并将事件绑定到每个元素

2 使用event delegation

document.addEventListener('keypress', function(e) {
    if (!e.target.matches('#name, #phone')) return;
    //your code here
});

【讨论】：

【解决方案2】：

使用querySelectorAll、forEach添加事件

document.querySelectorAll("#name, #inputLastName, #phone").forEach((ele) => {
  ele.addEventListener("keypress", function (e) {
    if (
      (e.charCode >= 97 && e.charCode <= 122) ||
      (e.charCode >= 65 && e.charCode <= 90)
    ) {
      alert("لطفا فارسی تایپ کنید");
      e.preventDefault();
    }
  });
});

function isPersian(str) {
  var p = /^[\u0600-\u06FF\s]+$/;
  return p.test(str);
}

<input type="text" name="firstname" id="name" class="field form-control" placeholder="Your name">
<input type="text" name="lastname" id="inputLastName" class="field form-control" placeholder="Last name">
<input type="tel" name="phonenumber" id="phone" class="field form-control" placeholder="Phone Number">

【讨论】：