onblur

• • 要素がフォーカスを失った時に発生します。

• • element.onblur = function;

• • <form name="f_blur">
    <input type="button" name="btn_y" value="YES">
    <input type="button" name="btn_n" value="NO">
    </form>
    <script type="text/javascript">
    document.f_blur.btn_y.onblur = function(){ debug("exit focus [YES] button"); }
    document.f_blur.btn_n.onblur = function(){ debug("exit focus [NO] button"); }
    document.f_blur.btn_y.onfocus = function(){ debug("enter focus [YES] button"); }
    document.f_blur.btn_n.onfocus = function(){ debug("enter focus [NO] button"); }
    </script>
    
  
  

• 要素をクリックするか TABキーを押して次の要素に移動すると、フォーカスを変更することができます。

onchange

• • テキストの値が変更された時や、選択項目が変更された時に発生します。

• • element.onchange = function;

• • <form name="f_change"><input type="text" name="text_box"><input type="button" name="btn_ok" value="OK"></form>
    <script type="text/javascript">
    gstr = "";
    function funcTextChange(){
    
    obj = document.f_change.text_box;
    debug( "change text : \"" + gstr + "\" → \"" + obj.value + "\"");
    gstr = obj.text;
    }
    function funcTextFocus(){
    
    gstr=document.f_change.text_box.value;
    debug( "enter focus text" );
    }
    document.f_change.text_box.onchange = funcTextChange;
    document.f_change.text_box.onblur = function(){ debug("exit focus text"); }
    document.f_change.text_box.onfocus = funcTextFocus;
    </script>
    
  
  
  • フォーカスが他の要素に移されるまでイベントは発生しません。

• • <form name="f_select">本日のお食事
    <select name="menu">
    <option value="80yen">あんぱん</option>
    <option value="120yen">カップ麺</option>
    <option value="98yen">ポテトチップス</option>
    </select>
    </form>
    <script type="text/javascript">
    function funcSelect(){
    
    obj = document.f_select.menu;
    idx = obj.selectedIndex;
    opText = obj.options[idx].text;
    opValue = obj.options[idx].value;
    debug( "change menu → " + opText + "(" + opValue + ")" );
    }
    document.f_select.menu.onchange = funcSelect;
    </script>
    
  
  
  • 本日のお食事 あんぱん カップ麺 ポテトチップス

• INPUT, SELECT, TEXTAREA のみ。

onclick

• • クリックされた時に発生します。

  • event.button	マウスボタンの種類
    event.detail	何回クリックしたか

• • element.onclick = function;

• • <form name="f_click">
    <input type="button" name="btn_ok" value="OK">
    </form>
    <script type="text/javascript">
    document.f_click.btn_ok.onclick = function(e){ debug("click [OK] button / button=" + e.button + ", detail=" + e.detail); }
    </script>
    
  
  

• ダブルクリックした時も発生します。

ondblclick

• • ダブルクリックされた時に発生します。クリックイベントも発生します。

• • element.ondblclick = function;

• • <form name="f_dblclick">
    <input type="button" name="btn_ok" value="OK">
    </form>
    <script type="text/javascript">
    document.f_dblclick.btn_ok.ondblclick = function(){ debug("double click [OK] button"); }
    document.f_dblclick.btn_ok.onclick = function(){ debug("click [OK] button"); }
    </script>
    
  
  

onfocus

• • 要素がフォーカスを受け取った時に発生します。

• • element.onfocus = function;

• • <form name="f_focus">
    <input type="button" name="btn_y" value="YES">
    <input type="button" name="btn_n" value="NO">
    </form>
    <script type="text/javascript">
    document.f_focus.btn_y.onblur = function(){ debug("exit focus [YES] button"); }
    document.f_focus.btn_n.onblur = function(){ debug("exit focus [NO] button"); }
    document.f_focus.btn_y.onfocus = function(){ debug("enter focus [YES] button"); }
    document.f_focus.btn_n.onfocus = function(){ debug("enter focus [NO] button"); }
    </script>
    
  
  

• 要素をクリックするか TABキーを押して次の要素に移動すると、フォーカスを変更することができます。

onkeydown / onkeypress / onkeyup

• • onkeydown :	キーを押している状態の時に発生します。
    onkeypress :	キーを押した時に発生します。
    onkeyup :	キーを離した時に発生します。

• • element.onkeydown = function;
  • element.onkeypress = function;
  • element.onkeyup = function;
    
  • イベント・キー

  • event.keyCode	キーコード
    event.charCode	キーコード
    event.shiftKey	Shiftキーの状態 (true/false)
    event.ctrlKey	Ctrlキーの状態 (true/false)
    event.altKey	Alttキーの状態 (true/false)

    
    
  • ASCIIコード表

• • <form name="f_keydown"><input type="text" name="text_box"></form>
    <script type="text/javascript">
    document.f_keydown.text_box.onkeydown = function(e){ debug("keydown = keyCode:" + e.keyCode + " charCode:" + e.charCode + " Shift:" + e.shiftKey + " Ctrl:" + e.ctrlKey + " Alt:" + e.altKey); }
    document.f_keydown.text_box.onkeypress = function(e){ debug("keypress = keyCode:" + e.keyCode + " charCode:" + e.charCode + " Shift:" + e.shiftKey + " Ctrl:" + e.ctrlKey + " Alt:" + e.altKey); }
    document.f_keydown.text_box.onkeyup = function(e){ debug("keyup = keyCode:" + e.keyCode + " charCode:" + e.charCode + " Shift:" + e.shiftKey + " Ctrl:" + e.ctrlKey + " Alt:" + e.altKey); }
    </script>
    
  
  

• キーを押して離した場合、onkeydown → onkeypress → onkeyup の順にイベントが発生します。
• onkeydown、onkeypress、onkeyup はフォーカスがあるときにイベントが発生します。

onload

• • ページが完全に読み込まれた後に発生します。

• • window.onload = function;

• • // ページの読み込みが完了したら、次の処理を行う
    window.onload = function(){ debug("onload時の処理"); }
    

• • function myfunc(){
    
    debug( "onload時の処理" );
    }
    // onload に myfunc()処理を追加する。
    window.addEventListener("load", myfunc, false);
    

• • function myfunc(){
    
    debug( "onload時の処理" );
    }
    // onload に myfunc()処理を追加する。
    if(window.addEventListener) window.addEventListener("load", myfunc, false);
    else window.attachEvent("onload", myfunc); // 古いIEに対応
    

• img要素でもonloadが使用できます。画像の読み込みが完了すると発生します。imgのonloadは、window.onloadと衝突はしません。

onmousedown / onmouseup

• • onmousedown :	マウスボタンを押した状態の時に発生します。
    onmouseup :	マウスボタンを離した時に発生します。

• • element.onmousedown = function;
  • element.onmouseup = function;

• • <img id="id_mousedown" src="IMG_0141s.gif">
    <script type="text/javascript">
    document.getElementById("id_mousedown").onmousedown = function(){ debug("mouse down"); }
    document.getElementById("id_mousedown").onmouseup = function(){ debug("mouse up"); }
    document.getElementById("id_mousedown").onclick = function(){ debug("click"); }
    </script>
    
  
  
  • 

onmousemove

• • マウスが要素上を移動するたびに発生します。

  • event.clientX	マウスポインタのX座標
    event.clientY	マウスポインタのY座標

• • element.onmousemove = function;

• • <img id="id_mousemove" src="IMG_0141s.gif">
    <script type="text/javascript">
    document.getElementById("id_mousemove").onmousemove = function(e){ debug("mouse move x:" + e.clientX + " y:" + e.clientY); }
    document.getElementById("id_mousemove").onmouseout = function(){ debug("mouse out"); }
    document.getElementById("id_mousemove").onmouseover = function(){ debug("mouse over"); }
    </script>
    
  
  
  • 

onmouseout / onmouseover

• • onmouseout :	マウスが要素から離れた時に発生します。
    onmouseover :	マウスが要素に入った時に発生します。

• • element.onmouseout = function;
  • element.onmouseover = function;

• • <img id="id_mouseout" src="IMG_0141s.gif">
    <script type="text/javascript">
    document.getElementById("id_mouseout").onmouseout = function(){ debug("mouse out"); }
    document.getElementById("id_mouseout").onmouseover = function(){ debug("mouse over"); }
    </script>
    
  
  
  • 

onresize

• • ウィンドウのサイズを変更した際に発生します。

• • window.onresize = function;

• • // 画面のサイズを変更した
    window.onresize = function(){
    
    • document.getElementById("idresize").innerHTML = "width:" + document.body.clientWidth + " height:" + document.body.clientHeight;
      
    }
    
  • idresize

• • // 画面のサイズを変更したときの処理
    function funcResize(){
    
    • document.getElementById("idresize2").innerHTML = "width:" + document.body.clientWidth + " height:" + document.body.clientHeight;
      
    }
    // onresize に funcResize()を追加
    window.addEventListener("resize", funcResize, false);
    
  • idresize2

onscroll

• • ウィンドウをスクロールした際に発生します。

• • window.onscroll = function;

• • // 画面をスクロールさせた
    window.onscroll = function(){
    document.getElementById("idscroll").innerHTML = "x:" + document.body.scrollLeft + " y:" + document.body.scrollTop;
    }
    
  • idresize

• • // 画面をスクロールさせたときの処理
    function funcScroll(){
    
    • document.getElementById("idscroll2").innerHTML = "x:" + document.body.scrollLeft + " y:" + document.body.scrollTop;
      
    }
    // onscroll に funcScroll()を追加
    window.addEventListener("scroll", funcScroll, false);
    
  • idscroll2

onunload

• • ページを閉じる後に発生します。

• • window.onunload = function;

• • // ページを閉じるときに、次の処理を行う
    window.onunload = function(){ debug("後処理"); }