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 );