onchange addEventListener の追加

onchange addEventListener の追加

ユーザーが要素の値を変更し、要素が入力フォーカスを失ったとき
 (プログラムから変更した場合には、イベントは発生しない)

<input id = "test" value = "test"/>

<script type ="text/javascript">
        var tag =  document.getElementById('test');
              tag.addEventListener('change', function(){
                      console.info('change');
                      console.log(tag.value);
                      alert('change');
                     },true);

      tag.addEventListener('click', change_value,false);

      function change_value(){
           var tag =  document.getElementById('test');
                 tag.value = 'change'
             }
</script>

onfocus and onblur addEventListener の追加

onfocus  and onblur addEventListener の追加


<input id = "test" value = "test"/>
<script type ="text/javascript">
      var tag =  document.getElementById('test');
            tag.addEventListener('focus', function(){
                  console.info('focus');
                  tag.value = 'focus';
            },false);

            tag.addEventListener('blur', function(){
                  console.info('blur');
                  tag.value = 'blur';
            },false);
</script>

onload addEventListener の追加

onload addEventListener の追加

window.onload = function(){
     console.log('fun 1');
}

window.addEventListener('load', fun2,false);

function fun2(){
     console.log('fun 2');
}

window.addEventListener('load', function(){
     console.log("fun 3")
},false);

addEventListener 一覧

分類	イベントハンドラ	発生状況
	onload	リソースのロードが完了したとき
	onunload	アンロードされたとき (ロードする前)
	readystatechange	documentのreadyState属性が変化したとき
フォーカス	onfocus	要素が入力フォーカスを得たとき
	onblur	要素が入力フォーカスを失ったとき
	onchange	ユーザーが要素の値を変更し、要素が入力フォーカスを失ったとき (プログラムから変更した場合には、イベントは発生しない)
	onselect	テキストが選択されたとき
	oncontextmenu	マウスで右クリック、またはアプリケーションキーが押されるなどして、コンテキストメニューが表示されるとき
マウス	onclick	マウスでクリックされたとき
	ondblclick	マウスでダブルクリックされたとき
	onmousedown	マウスボタンが押されたとき
	onmouseup	マウスボタンが離されたとき
	onmouseover	マウスが要素に乗ったとき
	onmouseout	マウスが要素から離れたとき
	onmousemove	マウスが要素の上を移動したとき
キー	onkeydown	ユーザーがキーを押したとき
	onkeypress	ユーザーがキーを押して離したとき
	onkeyup	ユーザーがキーを離したとき
フォーム	onsubmit	フォームの送信が要求されたとき
	onreset	フォームのリセットが要求されたとき
	onresize	ウィンドウのサイズが変更されたとき (Windowオブジェクトのみ)
	onscroll	要素のコンテンツがスクロールされたとき
	onabort	画像のロードが中断されたとき
	onerror	画像のロード中にエラーが発生したとき