我怎么知道哪个按钮调用了我的 javascript？答案

【问题标题】：How can I know which button called my javascript?我怎么知道哪个按钮调用了我的 javascript？
【发布时间】：2021-12-01 15:37:14
【问题描述】：

早安，

我有三个按钮 - 我们称它们为 myBtn1、myBtn2 和 myBtn3 - 执行基本相同的操作（即以模态模式打开 div）。

我有点想知道“谁”（即哪个按钮）调用了我的 javascript。有没有一种简单的方法可以知道这一点，还是我需要复制我的 javascript 部分？

对不起，如果这个问题听起来很愚蠢。

非常感谢您的帮助。

干杯

我的html代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
  </head>
  <body>

    <!-- Trigger/Open The Modal -->
      <button id="myBtn1">Open Modal</button>
      <button id="myBtn2">Open Modal</button>
      <button id="myBtn3">Open Modal</button>        
    <!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Some text in the Modal... </p>
      <p>Called by [myBtn1 or myBtn2 or myBtn3] </p>
    </div>
    <script type="text/javascript" src="./scripts/modal.js"></script>
    </div> 

  </body>
</html>

我的 javascript (modal.js)：

/*
    modal.js    
*/

  // Get the modal
  var modal = document.getElementById('myModal');

  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user clicks on the button, open the modal 
  btn.onclick = function() {
  modal.style.display = "block";
  }

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
  modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
  }

【问题讨论】：

查看事件委托，使用addEventListener 并查看事件的target 属性。
Getting the ID of the element that fired an event的可能重复
@Xufox，确定你是否知道要寻找什么。感谢您的宽容

标签： javascript html

【解决方案1】：

事件监听器被传递一个事件对象。它的 target 属性是触发事件的元素。

document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});

<div>
   <button id="button1">Button 1</button>
   <button id="button2">Button 2</button>
   <button id="button3">Button 3</button>
</div>

【讨论】：

谢谢 Devashish，我需要将此部分添加到我拥有的 javascript 文件中吗？
是的。但请注意，该代码将为文档中的所有按钮添加一个单击事件侦听器。如果您希望仅在单击某些按钮时执行此操作，请给这些按钮一个类并将选择器更改为 document.querySelectorAll(".button-class")。
感谢您的提示，Devashish。我确实在控制台中看到了一些东西这是否也意味着我需要相应地修改函数 btn.onclick ？现在，我不确定如何利用控制台提供的信息。
您不需要 btn.onclick 行并以这种方式分配事件侦听器。 e.addEventListener("click", function (event) { console.log(event.target) }); 正在为文档中的每个按钮添加一个事件监听器。
如果有帮助，请采纳。不客气:)

【解决方案2】：

您可以在事件处理程序中使用event.target 来确定调度事件的对象。通过这种方式，您可以轻松地将一个处理程序附加到父级以处理其所有子级的事件。

document.getElementById("div").onclick = function(e){
  console.log(e.target);
}

<div id="div">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>
</div>

【讨论】：

OP 可能不希望当点击发生在 div 内而不是任何按钮上时触发事件。

【解决方案3】：

 <button id="myBtn1" onclick="btnclick(this)">Open Modal</button>
 <button id="myBtn2"  onclick="btnclick(this)">Open Modal</button>
 <button id="myBtn3"  onclick="btnclick(this)">Open Modal</button>

在你的javascript 函数中你可以看到：

function btnclick(ref){
   var id = $(ref).attr('id');
}

【讨论】：

避免内联事件属性。
var id = $(ref).attr('id'); console.log 的 insetad;

【解决方案4】：

由于您在 HTML 文件中使用 script 标签包含了 js，因此所有 js 功能和事件都将可用。

// 获取打开modal的按钮

var btn = document.getElementById("myBtn");

你的代码有错误，你应该提供一个有效的ID。

var btn = document.getElementById("myBtn1"); // 这会起作用

现在 myBtn1 将启动 onclick 调用

// 在你的 modal.js 中

document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});

【讨论】：

这不能回答问题，应该是评论。