javascript - イベントバインド

バインドサンプル

<!-- HTML要素にバインド -->
<input type="button" value="ボタン1" onclick="sampleFun1()" />
<script type="text/javascript">
   function sampleFun1() {
       alert("sampelFun1");
   }
</script>

<!-- DOMにバインド -->
<input type="button" id="btn2" value="ボタン2"/>
<script type="text/javascript">
   function sampleFun2() {
       alert("sampelFun2");
   }
   
   document.getElementById("btn2").onclick = sampleFun2;
   
</script>

標準HTMLコンポーネントのイベント

• onabort
• onblur
• onchange
• onclick
• ondbclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload

イベントトリガー

<!-- イベントトリガー -->
<input type="button" value="ボタン1" onclick="sampleFun1();" />
<input type="button" id="btn2" value="ボタン2" onclick="sampleFun2();" />
<script type="text/javascript">
   function sampleFun1() {
       // btn2のクリックイベント発火
       document.getElementById("btn2").click();
   }
   function sampleFun2() {
       alert("sampelFun2");
   }
   
</script>

他のイベント発火メソッド

• click()
• blur()
• focus()
• select()
• submit()
• reset()