0

本件は自身掲載の前回の案件に引き続き、JSの大変初歩的な質問です。
当初当方は以下のコーディングをクリックイベント自体の意味合いと解釈してしまっていたのですが、≪対象要素へイベント内容を登録する意味合いが本来≫、と理解を改めることができました(.onclick=の記載で確かにそうだ、と納得)。

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("text-button").onclick = function() {
        document.getElementById("text").innerHTML = "クリックされた!";
        console.log("You're getting on my nerves!");
    };
});

そこで、また別の疑問が沸いてきてしまいました。

ブラウザの開発ツールで、ブレークポイントを付けてステップ実行できれば デバッグが本当にはかどるだろうなぁと以前から考えてきました。
認識を誤っていた自分は、上記のような要素へのイベント登録のコーディング部分にブレークポイントをはって、クリック時の通過具合を検証していた気がします。(ステップ実行できた試しがない)

素人考えでExcelVBAのようにイベントの発火時にブレークポイントを仕掛けられれば、と思ってきたのですが、先のコーディングの意味合いからするとJSでは それは無理=イベント察知部分にブレークポイントを仕掛けることはできない、ということなのでしょうか

イベント察知ができている・できていない、という確認作業は作業の上で頻発することだと思うのですが、皆様は如何しているのでしょうか?

妙な質問で申し訳ありませんがご見解を頂けましたら幸いです。

1 件の回答 1

3

イベントの発火時、すなわち今回の場合はクリック時にブレークポイントを仕掛ける方法についてご説明します。
そもそも、イベントの発火時、すなわちクリックされたときに何が起こるのかというのは、イベントとして関数を登録することにより指定します。
このプログラムの、... .onclick =の後ろの部分に注目してください。その部分は、以下のような関数式になっています。

function() {
    document.getElementById("text").innerHTML = "クリックされた!";
    console.log("You're getting on my nerves!");
}

この関数をclickイベントに登録するということは、クリックされるたびにこの関数を呼び出してくださいという意味になります。


余談ですが、関数定義の方法をご存知であれば、以下の例のように別の場所で定義した関数を登録することもできます。

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("text-button").onclick = clickedFunc;
});
function clickedFunc() {
    document.getElementById("text").innerHTML = "クリックされた!";
    console.log("You're getting on my nerves!");
}

さて、クリックされるたびにこの関数が呼び出されるということは、この関数の中にブレークポイントを仕込んでおくことによって、クリックイベントの発火に応じてデバッグやステップ実行を開始することができるということです。例えば、開発者ツールで下の例のコメントに示す行にブレークポイントを設定してみてください。

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("text-button").onclick = function() {
        // ↓↓↓↓↓↓↓ この行 ↓↓↓↓↓↓↓
        document.getElementById("text").innerHTML = "クリックされた!";
        console.log("You're getting on my nerves!");
    };
});

そうすれば、クリックするたびにここでブレークすることが確認できます。


また、JavaScriptでは、開発者ツールからブレークポイントを指定するほかに、プログラム中でブレークポイントを指定することもできます。こちらも便利なので紹介いたします。

これは、ブレークポイントとしたい地点にdebugger;という文を書くものです。この例では、以下のようにすることで、debugger;に到達した時点でブレークします。ただし、開発者ツールを開いている状態でないとdebugger;文は効果がないため注意してください。

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("text-button").onclick = function() {
        debugger;
        document.getElementById("text").innerHTML = "クリックされた!";
        console.log("You're getting on my nerves!");
    };
});
1
  • 本件についても大変分かりやすいご説明を頂いた結果、理解することができました。 関数の構造を理解すれば、都度呼び出される側にブレークポイントを仕掛けることで期待した挙動を得られるわけですね。 大満足の回答でした、ありがとうございました。
    – saya24
    Commented 2018年9月13日 0:12

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。