Event





Scroll


DESC Event Object を経由して, イベントがおきたときの各情報がとれる (Context)
function getScrollPosition() { var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTop; return obj; }



agent.を取得


var isWin9X = (navigator.appVersion.toLowerCase().indexOf('windows 98')+1); var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0); var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0); if (isOpera) isIE = false; var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);



onLoad


function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }
<body onload="alert( 'Test' )"> </body>



mouse





onmousemove


WARNING イベントオブジェクトの振る舞いはブラウザによって異なるので、 if文で処理を変える REF http://archiva.jp/web/javascript/get_mouse-position.html
// Event を hook する function setPosition(){ target = document.getElementById('sampleform'); window.document.onmousemove = function(e){ target.onmouseX.value = getMousePosition(e).x; target.onmouseY.value = getMousePosition(e).y; } } // Mouse の位置を取得する関数 function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }



onmouseout





onmouseover


DESC マウスがオブジェクトの上に来たとき
<button onmouseover="alert(this)"> test </button>



Focus


<input type=text value="test!" onFocus="alert('')">



キーボードイベント


WARNING 3種類のイベントがある。 <input> の内容を反映するには onkeyup にフックすること。


onkeyup


<input onkeyup="testfunc()" name="tReadOnly" type="text" size="50" value="init">


onenter


<input name="text1" OnKeyUp="if (event.keyCode == 13) { return false; }">


OnKeyPress


DESC Key が押している最中に, スクリプトがコールされる OBJECT <input type=text> onkeydown…キーが押し下げられた時 onkeypress…キーを押している最中 onkeyup…キーを押した後、離された時 // false を返すことで Request がこなくなる ? <input type="text" name="text1" OnKeyPress="if (event.keyCode == 13) {return false;}"> // ページ自体にキーボードイベントをとるには document.OnKeyDown にフックする。
<head> document.OnKeyDown = function() { alert( event.keyCode ); } </head>



timer





setInterval


DESC 一定間隔で処理を実行する SYNTAX window.setInterval( function, msec );
<body> <script> // 5秒毎に alert 実行 setInterval( function(){ "alert('test')" }, 3000 ); </script> </body> WARNING // 第一引数は function 型かも setInterval( "alert('test')", 3000 ); setInterval( function(){ "alert('test')" }, 3000 );
<body> <img id="img"> <script> // 一定時間ごとに, 絵をかえる function func() { var o = document.getElementById( "img" ); var n = Math.floor( 2 * Math.random() ); o.src = "test" + n + ".png"; } setInterval( function(){ func(); }, 3000 ); </script> </body>



Event.List


POINT Event には, GUI ( button ) 固有の Event と Window ( これも GUI ) の Event がある GUI 系の Event は button.onClick() など
// text area の scroll をえる <textarea onscroll="test()">
// onLoad は body に指定するらしい <html> <head> </head> <body onload="alert('Hello TINKO!')" onunload="alert('See you!')"> <p>Sample</p> </body> </html>


object


POINT 各要素には 共通の property がある
<img id="test"> // IMG nodeName tagName // 1 nodeType // test id var o = document.getElementById( "test" ); alert( "id = " + o.id + " nodeName = " + o.nodeName + " nodeType = " + o.nodeType + " nodeValue = " + o.nodeValue + " tagName = " + o.tagName );