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
<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
<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
<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>タグ
画像の読み込みが中止された時
<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>
画像の読み込みが中止された時：無し
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>
画像の読み込みが中止された時
<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>
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>
ウィンドウがフォーカスを失う時
<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>
ウィンドウがフォーカスを失う時
<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>タグ
フォームがリセットされる直前に発生
<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>
フォームがリセットされる直前に発生
<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>
フォームがリセットされる直前に発生
<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>タグ内)
フォーカスを失う時
<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>
フォーカスを失う時
<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>
フォーカスを失う時
<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="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">１</label>
<input type="checkbox" id="check2" name="check" value="2" ><label for="check2" data-type="typeA">２</label>
<input type="checkbox" id="check3" name="check" value="3" ><label for="check3" data-type="typeB">３</label>
<input type="checkbox" id="check4" name="check" value="4" ><label for="check4" data-type="typeB">４</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>
