どのボタンがjavascriptでクリックされたかを検出するには？

私の機能にクリックされたときにボタンのIDを運ぶ方法を理解しようとしています。 1機能はマウスオーバー時に色を変更し、マウスオーバー時に元の色に戻す機能です。私は単純にCSSでそれを行うことができますが、私はちょうどjavascriptでそれを行う方法を学びたいと思います。ありがとうございます。以下は私のコードです。どのボタンが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>

出典

2016-09-14 jerz

機能がトリガされると、それは、引数 'event'が付属しています。 'event'オブジェクトを使うと、クリックされたボタンを得ることができます。 'event.currentTarget'を使用します。 –

あなたがイベントに関数を添付すると、あなたは本当にあなたはそれにアクセスするには「この」キーワードを使用する必要があり、イベントを発する要素のidを追跡する必要はありません。以下はサンプルコードを使用したサンプルです。

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

出典

2016-09-14 07:01:33 Owuor

ありがとうございます。これは大いに役立ちます – jerz

大歓迎... – Owuor

すべてのイベント登録の意志は、引数Eventが付属しています。

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

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

出典

2016-09-14 06:35:51

どのボタンがjavascriptでクリックされたかを検出するには？

答えて

関連する問題