JavaScriptでクリックイベントを印刷するには

<body> 

    <button id ="b1">BUTTON</button> 
    </br> 
    <p id="text"> </p> 

    <script type="text/javascript"> 

    document.getElementById("b1").onmouseout = reset_button; 
    document.getElementById("b1").onmousedown = mousedown_button; 
    document.getElementById("b1").onmouseover = mouse_over; 
    document.getElementById("b1").onmousemove = mouse_move; 
    document.getElementById("b1").onclick = click_button; 


    function reset_button() { 
    document.getElementById("text").innerHTML = 
    "mouseout"; 
    } 
    function mousedown_button() { 
    document.getElementById("text").innerHTML = 
    "mousedown"; 
    } 
    function click_button() { 
    document.getElementById("text").innerHTML = 
    "click"; 
    } 
    function mouse_over() { 
    document.getElementById("text").innerHTML = 
    "mouseover"; 
    } 
    function mouse_move() { 
    document.getElementById("text").innerHTML = 
    "mousemove"; 
    } 

    </script> 
    </body>

ボタンを押すとmouseout、mousedown、mouseover、mousemove、onlickを出力したいと思います。しかし、私が作ったこのコードはmouseover、mousedown、およびmouseoutだけを出力します。誰かがどの部分が間違っていて、どうやって修正するのか説明できますか？JavaScriptでクリックイベントを印刷するには

出典

2016-06-17 jay0904

innerHTMLの代わりに 'console.log（ 'name'）'を使ってみてください。おそらく呼び出されているだけで上書きされますが、それ以外のものがあります。 Console.logがコンソールに追加されるので、すべてを見ることができます。 –

console.logを入れてください（あなたのイベント）;あなたの関数で –

あなたの例をありがとう。私はJSとHTMLの間に必要な分離の究極のデモンストレーションを見てうれしいです。 –

あなたのテキストが上書きされ、ここでコンソール出力を参照してください。

更新：簡体コード

ここで（リトルエイリアンへの賛辞）

['mouseout', 'mousedown', 'mouseover', 'mousemove', 'click'].forEach(
 
    ev_name =>b1.addEventListener(ev_name, e => console.log(ev_name)))

<button id="b1">BUTTON</button>

出典

2016-06-17 14:47:14 Eytibi

がAであなたがしようとしたものの簡潔なバージョン。ちょうど3行のコード。

['mouseout', 'mousedown', 'mouseover', 'mousemove', 'click'].forEach(
 
    ev_name =>b1.addEventListener(ev_name, e => b1.innerHTML += " " + ev_name))

<button id="b1">click me</button>

出典

2016-06-17 15:01:41

私はあなたのアプローチが好きで、それに応じて私の答えを更新 – Eytibi

のMouseMoveとマウスオーバーイベントは、MouseMoveのイベントを削除しようとお互いに干渉しています。

<body> 

    <button id ="b1">BUTTON</button> 
    </br> 
    <p id="text"> </p> 

    <script type="text/javascript"> 
    document.getElementById("b1").onclick = click_button; 
    document.getElementById("b1").onmouseout = reset_button; 
    document.getElementById("b1").onmousedown = mousedown_button; 
    document.getElementById("b1").onmouseover = mouse_over; 




    function reset_button() { 
    document.getElementById("text").innerHTML = 
    "mouseout"; 
    } 
    function mousedown_button() { 
    document.getElementById("text").innerHTML = 
    "mousedown"; 
    } 
    function click_button() { 
    document.getElementById("text").innerHTML = 
    "click"; 
    } 
    function mouse_over() { 
    document.getElementById("text").innerHTML = 
    "mouseover"; 
    } 

    </script> 
    </body>

出典

2016-06-17 15:02:00

JavaScriptでクリックイベントを印刷するには

答えて

関連する問題