如何检测在javascript中单击了哪个按钮？

Question

im trying to figure out how to carry the id of the button when clicked to my function. 即时通讯试图弄清楚如何点击按钮时携带按钮的ID。 1 function to change color on mouseover and one function to change it back to original color when mouseout. 一种功能是在鼠标悬停时更改颜色，另一种功能是在鼠标悬停时将其更改回原始颜色。 i know i can do it simply in css but i just want to learn how to do it in javascript. 我知道我可以简单地在CSS中做到这一点，但我只想学习如何在JavaScript中做到这一点。 Thanks in advance. 提前致谢。 Below is my code. 下面是我的代码。

  var buttonClass = this.className(); // document.getElementById("mainTitle"); this.style.backgroundColor="#000000"; this.style.color="#ffffff"; this.style.cursor = "pointer"; } function defaultColor() { var buttonClasss = this.getElementById(); //document.getElementById("addList"); this.style.backgroundColor = "#ffffff"; this.style.color = "#000000"; this.style.cursor = "pointer"; } //event listener for Change Title button document.getElementById("mainTitle").addEventListener("mouseover", changeColor); document.getElementById("mainTitle").addEventListener("mouseout", defaultColor); document.getElementById("mainTitle").addEventListener("click", changeTitle); //event listener for change title ends here //event listener for add listing document.getElementById("addList").addEventListener("mouseover", changeColor); document.getElementById("addList").addEventListener("mouseout", defaultColor); document.getElementById("addList").addEventListener("click", addListing); //event listener for add listing ends here

 #mainTitle { border:1px solid #ff33f4; float:left; clear:both; font-family:arial; font-weight:bold; font-size:20px; border-radius:50px; background-color:#ff33ff; width:200px; height:35px; text-align:center; padding-top:20px; padding-bottom:10px; cursor:pointer; } #addList { border:1px solid #ff33f4; float:right; font-family:arial; font-weight:bold; font-size:20px; border-radius:50px; background-color:#ff33ff; width:200px; height:35px; text-align:center; padding-top:20px; padding-bottom:10px; cursor:pointer; } #main { clear:both; margin-top:120px; }

 <div id="mainTitle" class="changeTitle">Change Title</div> <div id="addList" class="addList">Add List</div>

Answer 1

Every event registered will comes with argument Event . 每个注册的事件都带有参数Event 。

function defaultColor(e) {
                  //  ^ argument (Event)

     var currentClickedButton = e.currentTarget;   // to get the current clicked button
     /* Your code here */
}

Answer 2

When you attach a function to an event, you don't really need to track the id of the element emitting the event, you just need to use the 'this' keyword to access it. 将函数附加到事件时，您实际上不需要跟踪发出事件的元素的ID，只需要使用“ this”关键字来访问它。 Below is a sample of this using your sample code. 下面是使用您的示例代码的示例。

 <html> <head> <style> #mainTitle { border:1px solid #ff33f4; float:left; clear:both; font-family:arial; font-weight:bold; font-size:20px; border-radius:50px; background-color:#ff33ff; width:200px; height:35px; text-align:center; padding-top:20px; padding-bottom:10px; cursor:pointer; } #addList { border:1px solid #ff33f4; float:right; font-family:arial; font-weight:bold; font-size:20px; border-radius:50px; background-color:#ff33ff; width:200px; height:35px; text-align:center; padding-top:20px; padding-bottom:10px; cursor:pointer; } #main { clear:both; margin-top:120px; } </style> <script type="text/javascript"> function defaultColor() { //var buttonClasss = this.getElementById(); //document.getElementById("addList"); this.style.backgroundColor = "#ffffff"; this.style.color = "#000000"; this.style.cursor = "pointer"; } function changeColor(){ this.style.backgroundColor="#000000"; this.style.color="#ffffff"; this.style.cursor = "pointer"; } function changeTitle(){ } function addListing(){ } function OnL(){ //event listener for Change Title button document.getElementById("mainTitle").addEventListener("mouseover", changeColor); document.getElementById("mainTitle").addEventListener("mouseout", defaultColor); document.getElementById("mainTitle").addEventListener("click", changeTitle); //event listener for change title ends here //event listener for add listing document.getElementById("addList").addEventListener("mouseover", changeColor); document.getElementById("addList").addEventListener("mouseout", defaultColor); document.getElementById("addList").addEventListener("click", addListing); } </script> </head> <body onload="OnL()"> <div id="mainTitle" class="changeTitle">Change Title</div> <div id="addList" class="addList">Add List</div> </body> </html>

如何检测在javascript中单击了哪个按钮？

问题描述

2 个解决方案

解决方案1
5 2016-09-14 06:35:51

解决方案2
1 已采纳 2016-09-14 07:01:33

如何检测在javascript中单击了哪个按钮？

问题描述

2 个解决方案

解决方案1 5 2016-09-14 06:35:51

解决方案2 1 已采纳 2016-09-14 07:01:33

解决方案1
5 2016-09-14 06:35:51

解决方案2
1 已采纳 2016-09-14 07:01:33