読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

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()