イベントについて
Javascriptにおけるイベントは大きくわけて2種類ある。
① 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オブジェクト】にイベント登録をすること!
おわりー