１０．Ｊａｖａｓｃｒｉｐｔのイベントとイベント処理
オブジェクト指向プログラミングの多くは、イベント駆動型（イベントドリブン型）のプログラミングモデルが採用されており、
Javascriptもこの方式が採用されています。
Javascriptは、ブラウザから発生するいろいろなイベントを待っています。
イベントには、以下のようなものがあります。
・ブラウザがドキュメントのダウンロードが完了したとき
・ユーザーがハイパーリンクやボタンを操作したとき
・キーボードを操作したとき
など
上記のようなイベントが発生するとそのイベントに対応したイベントハンドラが呼び出され、イベントを処理するようになります。
このイベントをどのように処理するかは、プログラミングすることになります。
イベントハンドらの書き方は、以下のものがあります。
①イベントハンドラをHTMLのタグ内に書く方法
②イベントハンドラメソッド
③イベントリスナー
１）Javascriptのイベントハンドラの種類
|
２）イベントハンドラをHTMLのタグ内に書く方法
イベントハンドラをHTMLのタグ内に書きます。
イベント処理プログラムを直接書こともできます。また、定義した関数を呼び出すこともできます。
①HTMLタグの中にイベントハンドラとその処理プログラムを書く方法
＜書式＞
<input type="button" value="クリック！" onClick="alert('クリックしたな！！');">
＜サンプル１＞（ファイル名：js10-2-1-1.html）
<!DOCTYPE html>②HTMLタグ内にイベントハンドラを書いて処理プログラムを関数に定義してその関数を呼び出す方法（戻り値がない場合）
<html>
<head>
<meta charset="utf-8">
<title>HTMLタグの中にイベントハンドラとその処理プログラムを書く方法</title>
</head>
<body>
<input type="button" value="クリック！" onClick="alert('クリックしたな！！');">
</script>
</body>
</html>
<!DOCTYPE html>③関数リテラル（戻り値がある場合）
<html>
<head>
<meta charset="utf-8">
<title>HTMLタグ内にイベントハンドラを書いて処理プログラムを関数に定義して関数を呼び出す方法</title>
<script type="text/javascript">
<!--
var z;
function func(x,y){
var z=2*x+3*y;
alert("計算結果："+z);
}
// -->
</script>
</head>
<body>
<input type="button" value="クリック！" onClick="func(2,3);"> </body>
</html>
<!DOCTYPE html>３）イベントハンドラメソッド方式
<html>
<head>
<meta charset="utf-8">
<title>関数リテラル</title>
<body>
<script type="text/javascript">
<!-- var z;
var f=function(x,y){ var z=2*x+3*y;
return z; } z=f(1,1); //関数呼び出し
alert("計算結果："+z);
// -->
</script> </head> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>「id」属性を持つエレメントをオブジェクトとして扱う方法</title>
<script type="text/javascript">
<!--
window.onload=function(){
var element1=document.getElementById("btn");
var element2=document.getElementById("txt");
element1.onclick=function(){
element2.value=100;
func();
}
}
function func(){
alert("アラートでーす。");
}
// -->
</script>
</head> <body>
<input type="button" value="クリック！" id="btn">
<input type="text" id="txt">
</body>
</html>
<!DOCTYPE html>③ タグ名で示されるエレメントをオブジェクトとして扱う方法
<html>
<head>
<meta charset="utf-8">
<title>「name」属性を持つエレメントをオブジェクトとして扱う方法</title>
<script type="text/javascript">
<!--
window.onload=function(){
var elements1=document.getElementsByName("btn");
var elements2=document.getElementsByName("txt");
elements1[0].onclick=function(){
elements2[0].value=100;
func();
}
}
function func(){
alert("アラートでーす。");
}
// -->
</script>
</head> <body>
<form>
<input type="button" value="クリック！" name="btn">
<input type="text" name="txt">
</form>
</body>
</html>
<!DOCTYPE html>④ 「class」属性で示されるエレメントをオブジェクトとして扱う方法
<html>
<head>
<meta charset="utf-8">
<title>タグ名で示されるエレメントをオブジェクトとして扱う方法</title>
<script type="text/javascript">
<!--
window.onload=function(){
var elements=document.getElementsByTagName("input");
elements[0].onclick=function(){
elements[1].value=100;
func();
}
}
function func(){
alert("アラートでーす。");
}
// -->
</script>
</head> <body>
<form>
<input type="button" value="クリック！">
<input type="text">
</form>
</body>
</html>
<!DOCTYPE html>この方法でHTMLのエレメントをオブジェクトとして利用でき、属性やテキストはオブジェクトのプロパティとして参照することができます。
<html>
<head>
<meta charset="utf-8">
<title>「name」属性を持つエレメントをオブジェクトとして扱う方法</title>
<script type="text/javascript">
<!--
window.onload=function(){
var elements=document.getElementsByClassName("element");
elements[0].onclick=function(){
elements[1].value=100;
func();
}
}
function func(){
alert("アラートでーす。");
}
// -->
</script>
</head> <body>
<form>
<input type="button" value="クリック！" class="element">
<input type="text" class="element">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">④ イベントリスナー削除のサンプル
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>イベントリスナ追加のサンプル</title>
<script type="text/javascript">
<!--
setEventListener(window,"load",window_onLoad); //ドキュメントロード時にwindow_onLoad()関数が実行できるようにイベントリスナを追加している。
//必ず一番最初に書きます。
//このようにすることでwindow_load()関数がドキュメントロード時に実行されるようになります。 function setEventListener(obj,event,func){ //イベントリスナを追加のための関数
if(navigator.appName.indexOf("Microsoft")>-1){ //InternetExplorerは「０」、それ以外のブラウザは、「－１」を返す。
obj.attachEvent("on"+event,func); //InternetExplorerの場合のイベントリスナの追加
}
else{
obj.addEventListener(event,func,false); //InternetExplorer以外のブラウザのイベントリスナの追加
}
}
function window_onLoad(){
btn=document.getElementById("btn"); //HTMLのエレメント（ボタン）のオブジェクト化
txt=document.getElementById("txt"); //HTMLのエレメント（テキストフィールド）のオブジェクト化
setEventListener(btn,"mousedown",button_mouseDown); //[btn]オブジェクト上でマウスダウンしたときにbutton_mouseDown()関数を呼び出す
//イベントリスナの追加
setEventListener(btn,"mouseup",button_mouseUp); //[btn]オブジェクト上でマウスアップしたときにbutton_mouseUp()関数を呼び出す
//イベントリスナの追加
setEventListener(btn,"mouseover",button_mouseOver); //[btn]オブジェクト上でマウスオーバしたときにbutton_mouseOver()関数を呼び出す
//イベントリスナの追加
setEventListener(btn,"mouseout",button_mouseOut); //[btn]オブジェクト上でマウスアウトしたときにbutton_mouseOut()関数を呼び出す
//イベントリスナの追加
}
function button_mouseDown(){ //[btn]オブジェクト上でマウスダウンしたときに呼び出される関数。
txt.value="マウスボタンを押してるね！";
btn.value="マウスボタン押下中";
}
function button_mouseUp(){ //[btn]オブジェクト上でマウスアップしたときに呼び出される関数。
txt.value="マウスボタンを離したな！";
btn.value="マウスボタン離した";
}
function button_mouseOver(){ //[btn]オブジェクト上でマウスオーバしたときに呼び出される関数。
txt.value="マウスポインタを入れたな！";
btn.value="マウスポインタが入りました";
}
function button_mouseOut(){ //[btn]オブジェクト上でマウスアウトしたときに呼び出される関数。
txt.value="マウスポインタを出したな！";
btn.value="マウスポインタが出ました";
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="マウスオーバしてね！" name="btn" id="btn">
<input type="text" name="txt" id="txt">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>イベントリスナー削除のサンプル</title>
<script type="text/javascript">
<!--
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
if(navigator.appName.indexOf("Microsoft")>-1){
obj.attachEvent("on"+event,func);
}
else{
obj.addEventListener(event,func,false);
}
}
function resetEventListener(obj,event,func){ //イベントリスナを削除する関数
if(navigator.appName.indexOf("Microsoft")>-1){
obj.detachEvent("on"+event,func); //InternetExplorerの場合のイベントリスナの削除
}
else{
obj.removeEventListener(event,func,false); //InternetExplorer以外のブラウザのイベントリスナの削除
}
}
function window_onLoad(){
btn=document.getElementById("btn");
txt=document.getElementById("txt");
ilClear=document.getElementById("ilClear");
setEventListener(btn,"mousedown",button_mouseDown);
setEventListener(btn,"mouseup",button_mouseUp);
setEventListener(btn,"mouseover",button_mouseOver);
setEventListener(btn,"mouseout",button_mouseOut);
setEventListener(ilClear,"click",listener_clear);
}
function button_mouseDown(){
txt.value="マウスボタンを押してるね！";
btn.value="マウスボタン押下中";
}
function button_mouseUp(){
txt.value="マウスボタンを離したな！";
btn.value="マウスボタン離した";
}
function button_mouseOver(){
txt.value="マウスポインタを入れたな！";
btn.value="マウスポインタが入りました";
}
function button_mouseOut(){
txt.value="マウスポインタを出したな！";
btn.value="マウスポインタが出ました";
}
function listener_clear(){ //イベントリスナを削除しています。
resetEventListener(btn,"mousedown",button_mouseDown);
resetEventListener(btn,"mouseup",button_mouseUp);
resetEventListener(btn,"mouseover",button_mouseOver);
resetEventListener(btn,"mouseout",button_mouseOut);
resetEventListener(btn,"click",listener_clear); alert("全てのイベントリスナが削除されました。");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="マウスオーバしてね！" name="btn" id="btn">
<input type="text" name="txt" id="txt">
<input type="button" value="イベントリスナ削除" id="ilClear"> </form>
</body>
</html>