在 JS 中获取被点击元素的 ID

Question

我正在尝试建立一个网站，但遇到了一个问题，我有这个带有不同产品的 Bootstrap Carousel，当它们被点击时，它们应该重定向到具有该特定产品的页面，所以我正在尝试制作它，但因为每个轮播项目都有不同东西有点难以编写和更改链接。 所以我想用这个问题上网，但没有找到任何答案，如果有人知道答案，请考虑帮助我....

Answer 1

在处理程序中，使用：

event.target.id

or

this.id

例子：

<img id="product1" src="product1.png" onclick="toProductPage(event)"/>
<script>
   function toProductPage(event){
      location="product.php?id="+event.target.id;
   }
</script>

或以更短的形式：

    <img id="product1" src="product1.png" onclick="location='product.php?id='+this.id"/>

请注意，“事件”可以是全局变量。

Answer 2

因此，为了跟踪咳嗽的项目，您必须添加所谓的“事件侦听器”，将其想象为要求某人等待并“侦听”特定事情的发生，当它发生时，然后做一些事情

这就是我们需要设置的，一个等待特定按钮/按钮被“点击”的事件“监听器”，当它们被点击时，做一些事情

为此，您需要在 JavaScript 中引用您的 HTML 按钮，一种方法是为元素提供一个 ID，然后该 ID 可以作为 JavaScript 中的全局变量直接访问，这让您和这个“事件侦听器”到特定按钮，等待它被点击

然后当它被点击时，我们可以得到我们想要的按钮的所有信息，或者做任何 JavaScript 可以做的动作

所以

<Button id="hi"></button>
<Script>
hi.addEventListener("click", function (event) {
    console.log("clicked this button!!! ", event)
})
</Script>

然后检查控制台以获取有关该事件的更多信息。 显然，如果您遍历数组并将其添加到每个按钮中，您也可以从具有相同类的按钮数组中添加这些事件侦听器，只需调用 . addEventListener 到每个按钮对象，你就可以开始了，所有的信息和属性都可以从事件对象中访问，无论是 event.target、event.srcElement 等，只需查看所有属性的控制台