Question

我试图弄清楚如何在点击我的功能时携带按钮的ID。 1鼠标悬停时改变颜色的功能和鼠标输出时将其改回原始颜色的功能。我知道我可以在css中完成它，但我只是想学习如何在javascript中完成它。提前致谢。以下是我的代码。

  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

每个注册的活动都会附带参数Event。

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

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

Answer 2

当您将一个函数附加到事件时，您实际上不需要跟踪发出该事件的元素的ID，您只需要使用'this'关键字来访问它。以下是使用示例代码的示例。

<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 个答案: