创建一个识别单击哪个按钮的功能

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;
}

帕斯宾

Answer 1

当函数通过事件触发时，它们将参数传递给事件处理程序，通常名为 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

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

我会实现选项 1 因为它简单干净，如果你使用 jQuery 选项 3 也不是一个坏喊。

选项 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>