html/JS/jQueryイベント一覧

一覧

onclick="" クリック時 多くの要素
ondblclick="" ダブルクリック時 多くの要素
onmousedown="" マウスのボタンが押し下げられた時 多くの要素
onmouseup="" マウスのボタンが放された時 多くの要素
onmouseover="" マウスカーソルが乗った時 多くの要素
onmousemove="" マウスカーソルが移動時 多くの要素
onmouseout="" マウスカーソルが離れた時 多くの要素
onkeypress="" キーが押されて放された時 多くの要素
onkeydown="" キーが押し下げられた時 多くの要素
onkeyup="" キーが放された時 多くの要素
onload="" ロード完了時 body要素、frameset要素
onunload="" 他のページに移動して現在のページが消える時 body要素、frameset要素
onfocus="" フォーカス時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onblur="" フォーカス喪失時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onsubmit="" フォーム送信時 form要素
onreset="" フォームリセット時 form要素
onselect="" 入力欄のテキスト選択時 input要素、textarea要素
onchange="" フォーカス喪失時、値が変化していた時 input要素、select要素、textarea要素
onContextmenu="" 右クリックメニュー表示時 document要素、body要素、他多くの要素

<a>タグ

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>

<script type="text/javascript">
  document.getElementById(‘mylink1’).onclick = function(){
    window.alert("onClick");
  };
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>

<script type="text/javascript">
  document.getElementById(‘mylink2’).onmouseover = function(){
    window.alert("onMouseOver");
  };
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>

<script type="text/javascript">
  document.getElementById(‘mylink3’).onmouseout = function(){
    window.alert("onMouseOut");
  };
</script>

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink1").click(function(){
      window.alert("onClick");
    });
  });
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseover(function(){
      window.alert("onMouseOver");
    });
  });
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseOut(function(){
      window.alert("onMouseOut");
    });
  });
</script>

onClick
リンクテキストをクリックした時
onClick

<a href="#" id="mylink1" onClick="fnOnClick()">onClick</a><br/>
<script type="text/javascript">
  function fnOnClick(){
    window.alert("onClick");
  }
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時
onMouseOver

<a href="#" id="mylink2" onMouseOver="fnOnMouseOver()">onMouseOver</a><br/>
<script type="text/javascript">
  function fnOnMouseOver(){
    window.alert("onMouseOver");
  }
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時
onMouseOut

<a href="#" id="mylink3" onMouseOut="fnOnMouseOut()">onMouseOut</a><br/>
<script type="text/javascript">
  function fnOnMouseOut(){
    window.alert("onMouseOut");
  }
</script>

<img>タグ

onAbort
画像の読み込みが中止された時


<img id=”myimg1″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg1").onabort = function(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg2").onerror = function(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id=”myimg3″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg3").onload = function(){
    window.alert("onLoad");
  }
</script>

onAbort
画像の読み込みが中止された時:無し

onError
画像の読み込みが中止された時


<img id="myimg2" src="~.gif" /><br/>

<script type="text/javascript">
  $(function(){
    $("#myimg2").error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" src="~.gif" /><br/>

<script type="text/javascript">
  $(function(){
    $("#myimg3").load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onAbort
画像の読み込みが中止された時


<img id="myimg1" onAbort="fnOnAbort()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnAbort(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" onError="fnOnError()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnError(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" onLoad="fnOnLoad()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

windowオブジェクト,<body>タグ,<frameset>タグ

<body id=”mybody”>
 ~
</body>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  window.onblur = function() {
    //window.alert("onBlur");
  };
  document.getElementById("mybody").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  window.onerror= function() {
    //window.alert("onError");
  };
  document.getElementById("mybody").onerror= function() {
    //window.alert("onError");
  };
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  window.onfocus= function() {
    //window.alert("onFocus");
  };
  document.getElementById("mybody").onfocus= function() {
    //window.alert("onFocus");
  };
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  window.onload= function() {
    //window.alert("onLoad");
  };
  document.getElementById("mybody").onload= function() {
    //window.alert("onLoad");
  };
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  window.onunload= function() {
    //window.alert("onUnload");
  };
  document.getElementById("mybody").onunload= function() {
    //window.alert("onUnload");
  };
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  $(function(){
    $(window).blur(function(){
      //省略
      //window.alert("onBlur");
    });
  });
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  $(function(){
    $(window).error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  $(function(){
    $(window).focus(function(){
      //省略
      //window.alert("onFocus");
    });
  });
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  $(function(){
    $(window).load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  $(function(){
    $(window).unload(function(){
      //省略
      //window.alert("onUnload");
    });
  });
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onBlur");
  }
</script>

<body id="mybody" onBlur="fnOnBlur()">
 ~
</body>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  function fnOnError(){
    window.alert("onError");
  }
</script>

<body id="mybody" onError="fnOnError()">
 ~
</body>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

<body id="mybody" onFocus="fnOnFocus()">
 ~
</body>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

<body id="mybody" onLoad="fnOnLoad()">
 ~
</body>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  function fnOnUnload(){
    window.alert("onUnload");
  }
</script>

<body id="mybody" onUnload="fnOnUnload()">
 ~
</body>

<form>タグ

onReset
フォームがリセットされる直前に発生



<form id="myform1">
  <input type="text" /><br/>
  <input type="Reset" value="Reset" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onreset = function(){
    window.alert("onReset");
  }
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform2">
  <input type="Submit" value="Submit" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onSubmit = function(){
    window.alert("onSubmit");
  }
</script>

onReset
フォームがリセットされる直前に発生



<form id="myform3">
  <input type="text" /><br/>
  <input type="reset" id="myreset" value="reset" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    //「reset」イベントは無い(多分)ので「click」イベントで代用
    $("#myreset").click(function(){
      window.alert("onReset");
    });
  });
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform4">
  <input type="submit" value="submit" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    $("#myform").submit(function(){
      window.alert("onSubmit");
    });
  });
</script>

onReset
フォームがリセットされる直前に発生




<script type="text/javascript">
  function fnReset(){
    window.alert("onReset");
  }
</script>

<form onReset="fnReset()">
  <input type="Reset" value="Reset" />
</form>

onSubmit
フォームがサブミットされる直前に発生



<script type="text/javascript">
  function fnSubmit(){
    window.alert("onSubmit");
  }
</script>

<form onSubmit="fnSubmit()">
  <input type="submit" value="submit" />
</form>

<input type="text">,<input type="password">(<form>タグ内)

onBlur
フォーカスを失う時




<input type="text" id="mytext1" value="onblur"/>
<script type="text/javascript">
  document.getElementById("mytext1").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onChange
テキストが変更され、フォーカスを失った時




<input type="text" id="mytext2" value="onchange"/>
<script type="text/javascript">
  document.getElementById("mytext2").onchange = function() {
    //window.alert("onChange");
  };
</script>

onFocus
フォーカスを得た時




<input type="text" id="mytext3" value="onfocus"/>
<script type="text/javascript">
  document.getElementById("mytext3").onfocus = function() {
    //window.alert("onFocus");
  };
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生




<input type="text" id="mytext4" value="onselect"/>
<script type="text/javascript">
  document.getElementById("mytext4").onselect = function() {
    //window.alert("onSelect");
  };
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" />


<script type="text/javascript">
  $(function(){
    $("#mytext1").blur(function(){
      window.alert("onBlur");
    });
  });
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext2" />


<script type="text/javascript">
  $(function(){
    $("#mytext2").change(function(){
      window.alert("onChange");
    });
  });
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext3" />


<script type="text/javascript">
  $(function(){
    $("#mytext3").focus(function(){
      window.alert("onFocus");
    });
  });
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" />


<script type="text/javascript">
  $(function(){
    $("#mytext4").select(function(){
      window.alert("onSelect");
    });
  });
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" onBlur="fnOnBlur()" value="onBlur"/><br/>

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onblur");
  }
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext3" onChange="fnOnChange()" value="onChange"/><br/>

<script type="text/javascript">
  function fnOnChange(){
    window.alert("onChange");
  }
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext2" onFocus="fnOnFocus()" value="onFocus"/><br/>

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" onSelect="fnOnSelect()" value="onSelect"/><br/>

<script type="text/javascript">
  function fnOnSelect(){
    window.alert("onSelect");
  }
</script>

<input type="button">,<input type="submit">,<input type="reset">(<form>タグ内)

onClick
クリックしたとき発生



<input type="button" id="mybutton3" /><br/>
<button id="mybutton4"></button><br/>

<script type="text/javascript">
  document.getElementById("mybutton3").onclick = function() {
    window.alert("onClick");
  };
  document.getElementById("mybutton4").onclick = function() {
    window.alert("onClick");
  };
</script>

<input id="htmlButton" type="button" value="htmlButton" />

<script type="text/javascript">
 $(function(){
  $("#htmlButton").click (function(){
    window.alert('click');
  });
  または
  $("#htmlButton").on("click", function(){
    window.alert(‘click’);
  });

 });
</script>

onClick
クリックしたとき発生

onClick=“fnOnClick()” />


<input type="button" id="mybutton1" onClick="fnOnClick()" /><br/>
<button id="mybutton2" onClick="fnOnClick()"></button><br/>

<script type="text/javascript">
  function fnOnClick(){
    windows.alert("onClick");
  ]
</script>

<input type="radio">



<input type="radio" id="rdoMan" name="gender" checked="checked" value="man" />
<label for="rdoMan">MAN</label><br/>
<input type="radio" id="rdoWoman" name="gender" value="woman" />
<label for="rdoWoman">WOMAN</label><br/>


<script type="text/javascript">
  $(function(){
    changeイベント
    $("input[name='gender']:radio").change(function(){
      window.alert('checked');
    });
    clickイベント
    $('input[name="~"]:radio').on('click', function () {
      let value = $(this).val();
    });
    
  });
</script>

index:0(=man)の要素を選択
$("input[name='gender']:eq('0')").attr("checked", true);

value:manの要素を選択
$("input[name='gender']").val(["man"]);

要素全体を未選択
$("input[name='gender']").attr("checked", false);

<select>

$(‘#optTime’).on('change',function(){
window.alert(‘changed’);
});

<checkbox>





<input type="checkbox" id="check1" name="check" value="1" ><label for="check1" data-type="typeA">1</label>
<input type="checkbox" id="check2" name="check" value="2" ><label for="check2" data-type="typeA">2</label>
<input type="checkbox" id="check3" name="check" value="3" ><label for="check3" data-type="typeB">3</label>
<input type="checkbox" id="check4" name="check" value="4" ><label for="check4" data-type="typeB">4</label>
<script>
$(function ($) {
 $('input[name="check"]').on('change', function(e, param) {
  チェック状態(true/false)
  let checked = $(this).prop('checked');
  value値
  let value = $(this).val();
  data-type値
  let type = $(this).data("type");
  $('input[name="check"]').each(function() {
   if ($(this).data("type")==type){
    $(this).prop('checked', checked); //true/false
   }
  })
 });
});
</script>