用javascript检测onclick

有没有人知道一种方法可以检测一系列图像输入按钮中的哪一个被点击，并相应地执行一些javascript

例如，如果单击“关于”按钮，页面上的“关于”标题将变为蓝色。

---

我可以单独做这件事，但是否有一个循环或东西来缩小它？提前谢谢

如果您的按钮共享一个类，您可以使用

document.querySelectorAll

选择所有按钮和

Array.prototype.forEach.call

进行迭代：

<button class="about-button" id="a">a</button>
<button class="about-button" id="b">b</button>
<button class="about-button" id="c">c</button>
<script>
    [].forEach.call(document.querySelectorAll('.about-button'), function(el) {
        el.addEventListener('click', imageButtonClickHandler);
    });

    function imageButtonClickHandler() {
        alert('button clicked: ' + this.id);
    }
</script>

a
B
C
[].forEach.call（document.querySelectorAll（'.about button'），函数（el）{
el.addEventListener（'click'，imageButtonClickHandler）；
});
函数imageButtonClickHandler（）{
警报（'单击的按钮：'+此.id）；
}

如果您使用的是jQuery，则可以使用

on

方法：

$("#about").on("click", function(event){
  $(this).css("background-color", "blue"); // Or RGB color, just like in the CSS
});

---

资料来源：这个问题并不完全清楚，但我会根据一些假设来回答

如果动态创建图像按钮，那么我会将一个onclick事件处理程序附加到所有要添加的图像按钮，并将“this”作为参数传递给处理程序。这样，单击处理程序可以查看传入的DOM元素

<a onclick="imageClicked(this)"><img src="about.jpg" /></a> 

如果元素是在页面上声明的，而不是动态添加的，那么如果没有那么多，我会为每个图像按钮绑定click事件（正如@joshuabrodie所指出的）。如果有很多，我会有一个点击处理程序，并在“数据”属性中有特定于图像按钮的数据

<a class="imgbtn" data-buttonname="about"><img src="about.jpg" /></a>

$('.imagebtn').bind('click', function () {
  console.log($(this).data('buttonname')); // about
});

$（'.imagebtn'）.bind（'click'，函数（）{
console.log（$（this.data（'buttonname'））；//关于
});

您尝试过什么？为什么不起作用？您可能想查看。您想根据访问的页面在菜单中保留元素“悬停”吗？是吗？在YUI中执行此操作时，我使用delegate，从父元素进行委托，一个处理程序接收匹配子元素的所有单击事件。然后在一种方法中，您只需检查按钮/etc的ID（或其他属性）以检查要执行的操作。您是否使用jQuery？我已经尝试使用类似这样的单独函数来执行此操作。。。我只是想用JavaScript，不用JQuery。谢谢！然后，我将如何根据单击的标题更改相应的标题？