我真的必须添加具有多个不同参数的多个事件侦听器吗？答案

【问题标题】：do i really have to add multiple event listener with multiple different arguments?我真的必须添加具有多个不同参数的多个事件侦听器吗？
【发布时间】：2020-08-03 13:08:05
【问题描述】：

        <body>

 <div id = "styleDiv">
 <p> add to cart <span id = "balls"> 25.99 </span> </p> 
 <p> add to cart <span id=  "racket"> 68.99 </span> </p>
 <p> add to cart <span id=  "grip"> 6.99 </span> </p>
 <button> price after tax </button>

 </div>


  <script>
  
  var btn = document.querySelector("button");
  var balls = document.querySelectorAll('#balls');
  var racket = document.querySelector('#racket');
  var grip = document.querySelector('#grip');
  
  btn.addEventListener( 'click', function() { 
  calcPrice(balls);
  })
  
    btn.addEventListener( 'click', function() { 
  calcPrice(racket);
  })
  
     btn.addEventListener( 'click', function() { 
  calcPrice(grip);
  })
  
 
    
    //***************************************** READING A NUMBER INSIDE THE PRGRAM WITH INNERHTML AND 
    THEN CONTROLLING DECIMAL LENGTH ******************************
   function calcPrice(element) {

 var price = element.innerHTML; 
 var tax = 0.175;// tax rate
 var fullPrice = (price * tax) + parseFloat(price); 

 fullPrice = fullPrice.toString(); 

 if (fullPrice.charAt(5) == "5") {  

 fullPrice = fullPrice.slice(0,5)+ "4";

 }
 fullPrice = Number(fullPrice);   
 var totalPrice = fullPrice.toFixed(2);

 element.innerHTML = totalPrice;

 return totalPrice;

 }

如何缩短此代码？这样我就不必添加多个事件侦听器越多不同的跨度？就像我计划添加 30 个不同的跨度一样，我肯定必须拥有 30 个不同的事件侦听器。我喜欢为所有不同的跨度添加一个事件侦听器，然后将持有的参数传递给函数，然后返回答案。这可能吗

谢谢大家

【问题讨论】：

为什么是.querySelectorAll('#balls')？ id 必须是唯一的（calcPrice() 只能处理单个元素）。
只需在一个事件处理程序中执行三个调用，然后在事件处理程序中抓取元素或将选择器传递给calcPrice() 并在那里抓取元素。
谢谢，我还是新手，querySelector All 是个错误，我不知道为什么会这样，错字/脑雾
Andread 你能给我一个在一个 ecent 处理程序中进行 3 次调用的快速示例吗？所以我知道你的意思吗？我会接受你的回答并非常感谢你
使用 id 列表，遍历该列表，获取具有当前 id 的元素，使用当前元素调用 calcPrice()。为您感兴趣的所有<span> 元素添加一个公共类，使用.querySelectorAll(".<the class>") 获取它们，遍历元素，为每个元素调用calcPrice()。使用.querySelectorAll() 获取#styleDiv 中的所有<span> 元素，遍历元素，为每个元素调用calcPrice()。 ...

标签： javascript button return arguments addeventlistener

【解决方案1】：

您不必为每个单独的按钮添加事件侦听器。根据您想要执行的操作，您可以将按钮包装在 <div> 标记中，并将侦听器添加到此标记，以便侦听所有按钮。但是，您需要确保实际按下按钮，而不仅仅是<div>。可以看一个例子here.

【讨论】：