イベントについて

Javascriptにおけるイベントは大きくわけて２種類ある。

①  HTMLのイベント属性に処理を書く方法
　　└ ①-2 イベントプロパティを使う方法

②イベントリスナーを使う方法

①  HTMLのイベント属性に処理を書く方法

<p onclick="alert('こんにちわ');">クリック</p>

<p onclick="alert('こんにちわ');" onmuseout="alert('マウス離れた');">クリック</p>
//上記のように複数指定も可能

インラインCSSと同じ文法。
タグ中に、イベント属性="処理"を記述する方法。

＜注意点＞
　『'』を『'』または『"』を『"』でくくることはできない。
　値の中で文字列を使用する場合、『"』でくくられているならば『'』、
  『'』でくくられているならば『"』を使用しなければならない。

よく利用されるイベント属性
onclick=""                     ・・・・要素がクリックされたとき
ondblclick=""               ・・・・要素がダブルクリックされたとき
onmouseover=""         ・・・・要素の上にマウスが重なったとき
onmouseout=""           ・・・・要素の上からマウスが離れたとき

その他イベント属性↓
https://www.tagindex.com/html_tag/basic/event.html

①-2 イベントプロパティを使う方法

<p id="txt01">クリック</p>

<script>

    var mybox = document.getelementById("txt01");

    function myfunc(){
        alert('こんにちわ');
    }

    mybox.onclick = myfunc();

</script>

①では、【要素】に直接『onclick』を記述したので、わかりやすかった。
が、今回はJavascript側から【要素】を取得しなければならない。

取得した【要素】へ『.』でつなげてイベントハンドラを記述し、
処理を渡す、という流れになる。

今回では、【要素】の取得には
「document.getelementById("txt01")」を使う。
取得した要素を、変数mayboxへ代入。
myboxに『.onclick』と記述し、関数を渡します。

＜注意点＞
・記述するイベント属性は①と同じである。
・イベント属性には、値ではなく処理（関数）を渡してあげる。
　↑は関数宣言したもの、↓は無名関数

<p id="txt01">クリック</p>

<script>
    var mybox = document.getelementById("txt01");

    mybox.onclick = function(){
        alert('こんにちわ');
    }
    mybox.onclick = function(){
        alert('おはよう');
    }
</script>

・alert('おはよう')で上書きされてしまうので、メンテナンス性が悪い。
　この手法はあまり使われない。

②イベントリスナーを使う方法    <よく使われる手法>

addEventListener（アドイベントリスナー）関数を使う。

<p id="txt01">クリック</p>

<script>

    var mybox = document.getelementById("txt01");

    function myfunc(){
        alert('こんにちわ');
    }

    mybox.addEventListener("click",myfunc,false);

</script>

addEventListener（第一引数,第二引数,第三引数）
　第一引数には【イベントハンドラ】
　第二引数には【関数】
　第三引数には【イベントバブリング】を設定する。

＜注意＞
　第一引数【イベントハンドラ】は『"』か『'』でくくること！
　①でのイベント属性とイベントハンドラは別。名前が違うので注意！
　
　第三引数の『イベントバブリング』とは、
　親要素にイベントを伝播させるかさせないかと言う意味。
　基本、伝播させないことが多いので「false」で丸暗記でOK。

<p id="txt01">クリック</p>

<script>

    var mybox = document.getelementById("txt01");

  
    mybox.addEventListener("click",function(){
        alert('こんにちわ');},false);

    mybox.addEventListener("click",function(){
        alert('おはよう');},false);

</script>

①-2では上書きされてしまうイベント処理の複数追加も、
addEventListenerを使えば追加可能。

イベントハンドラとイベント属性まとめ

上記の「load」というイベントハンドラでの注意点。
「click」や「mauseover」は対象となる要素へイベントを追加する形だが、
「load」については、【windowオブジェクト】へ追加する。

<script>
    window.addEventListener("load",function(){
    alert('おはよう');},false);
</script>

【documentオブジェクト】だと、Firefoxの一部とIEで動かないので注意。
ページのロードが完了してから処理を追加したい場合、
【windowオブジェクト】にイベント登録をすること！

おわりー