制作一个识别点击了哪个按钮的函数

Question

我的 HTML 中有 3 个按钮，三个滑雪胜地各有一个按钮。单击按钮时，我想显示相关信息。

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0">Stranda</button>
    <button id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

我有这个工作，但问题是我已经制作了 3 个独立的函数，我相信它们可以很容易地变成 1 个。

如果所有onclick 事件都转到同一个函数，我如何让函数检测单击了哪个按钮，以便显示正确的信息？

function boot() 
{
    document.getElementById("btnStranda").onclick = infoStranda;
    document.getElementById("btnOveroeye").onclick = infoOveroeye;
    document.getElementById("btnFjellseter").onclick = infoFjellseter;
}

Pastebin

Answer 1

当函数通过Event 触发时，它们会将参数传递给事件处理程序，通常命名为event 或e，即事件本身。

e.currentTarget 指的是事件处理程序已附加到的元素。

document.querySelector('#foo').onclick = doSomething
document.querySelector('#bar').onclick = doSomething


function doSomething(e) {
  // log id of current target element of the click event
  console.log(e.currentTarget.id, ' was clicked')
}

<button id="foo">Foo</button>
<button id="bar">Bar</button>

或者，您也可以使用e.target，它指代触发事件的元素。

Answer 2

您可以根据单击的按钮创建一个使用参数调用的函数。因此，对于单击侦听器，您仍然拥有三个不同的功能。我认为这比在 DOM 节点上添加一些信息（类或 id）来仅在一个函数中区分您的情况要好。

所以保留三个函数，但调用一个通用函数来做通用的事情。

例如：

function commonOperation(indexInContact) {
    // make your operations based on the param(s)
}

// And one of your function that listen a click will call common 
function infoStranda() {
    commonOperation(0)
    // Do specific Stranda things if needed
}

希望有帮助:)

Answer 3

有几种不同的方法可以做到。

如果您使用 jQuery option 3 也不错的话，我会实现 option 1，因为它简单明了。

选项1：添加一个函数并将对象（self）传递给它

function displayInfoById(element) {
     console.log(element.value);
}

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0" onclick="displayInfoById(this)">Stranda</button>
    <button id="btnFjellseter" type="button" value="1" onclick="displayInfoById(this)">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2" onclick="displayInfoById(this)">Overøye</button>
</div>

选项 2：使用附加的事件处理程序获取事件 currentTarget。

document.getElementById("btnStranda").onclick = displayInfo;
document.getElementById("btnOveroeye").onclick = displayInfo;
document.getElementById("btnFjellseter").onclick = displayInfo;

function displayInfo(event) {
  console.log(event.currentTarget.value)
}

<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

选项 3：使用类属性和 jQuery 事件处理程序 .on('click'):

$(".buttonClass").on('click', function(event) {
  console.log(event.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>