单个 js 函数可在按钮上创建 9 个不同的警报

Question

我正在 div 中创建一个按钮，因此当我们单击它时，它会向我们显示 API 中给出的人的详细信息。但是现在我对如何做到这一点感到困惑，就像我有 9 个 div 并且每个 div 都有自己的按钮，我在按钮上使用 onClick() 它适用于单个按钮但是要显示 9 个人的信息，如果我使用 9 个不同的 onClick() 函数，它会在代码中产生冗余，那么单个函数如何处理所有这些？

HTML

<button type="button" class="button" onclick="show" name="button">Details</button>

Answer 1

你可以尝试这样的事情。导入到 html 文件时不要忘记延迟执行：

const alert = (e) => {
    window.alert(e.target.innerHTML);
}

const buttons = document.getElementsByClassName("button");
for (const btn of buttons) {
    btn.addEventListener("click", alert);
}

Answer 2

如果每个 div 都有自己的按钮，这样您就可以在单击按钮时找到它的 ID

 <button type="button" id="btn1" class="button" onclick="show(this)" name="button">Details</button>

这里是javascript函数

function show(btn){
   const id = btn.getAttribute("id"); // here you will get "btn1"
   if(id == "btn1"){
        
  }
}

Answer 3

您可以利用 event bubbling and addEventListener API 只用一个事件侦听器和一个处理程序来做到这一点。

const root = document.getElementById('root');

const handler = (e) => {
  // target IS THE CLICKED BUTTON.
  const {target} = e;
  
  if (target.tagName === 'BUTTON') {
    alert(`${target.name} has been pressed.`);
  }
};

root.addEventListener('click', handler);

<div id='root'>
  <div>
    <button type="button" class="button" name="Button 1">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 2">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 3">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 4">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 5">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 6">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 7">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 8">Details</button>
  </div>
  
  <div>
    <button type="button" class="button" name="Button 9">Details</button>
  </div>
</div>

Answer 4

您可以使用 querySelectorAll()。这意味着你 select 所有按钮。你必须在大括号中传递的是 CSS select 之类的这个：常量按钮=document.querySelectorAll('button').
之后你必须使用forEach()。这是一个回调函数，它将在每个按钮上应用 command/event。例如如果单击 x 按钮，你会怎么做。

对于这些用例，最推荐一起使用 querySelectorAll 和 forEach。

const button = document.querySelectorAll('.button');

button.forEach(e => {
  // e here means every single button, doesn't matter which one
  e.addEventListener('click', () => {
    document.querySelector('h1').textContent += 1;
    }
  )}
)

<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<h1>Result here: </h1>

单个 js 函数可在按钮上创建 9 个不同的警报

A single js function to create 9 different alerts on buttons

html

javascript

dom

dom-events