タグのon属性

 
■概要
 
HTML上でイベント発火時、実行する処理を直接定義することができます。
 
※属性内で使うthisという変数はタグ自信を表します。
 
■例

<script type=”text/javascript”>
　function test_over(mouse) {
　　mouse.style.color=”black”;
　}
　function test_out(mouse) {
　　mouse.style.color=”white”;
　}
</script>
<button id=”test-btn” onmouseover=”test_over(this)” onmouseout=”test_out(this)”>マウスカーソルを載せてみてー</button>

出力結果

マウスカーソルを載せてみてー

 
■DOMのon属性
HTMLタグへ直接属性を指定することもできるが、QuerySelectorを通して持ってきたオブジェクトでもon属性を指定することができます。
 
■例

<button id=”test-btn2″>押下するとこんにちは</button>
<script type=”text/javascript”>
　var testBtn2 = document.getElementById(“test-btn2”);
　testBtn2.onclick = function() {
　　alert(“こんにちは”);
};
</script>

出力結果

押下するとこんにちは