事件(一)

一.事件を結びつける
JavaScriptがユーザーの操作に応答するためには、まずDOM要素バインディングイベント処理関数が必要です.イベントハンドラクションとは、ユーザ操作を扱う関数であり、異なる操作には異なる名前が対応しています.JavaScriptには、よく使われる3つのバインディングイベントの方法があります.JavaScriptコードにバインドされています.・イベントの待ち受け関数をバインドします.
1.DOMで直接結びつけることができます.DOM元素にオンclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypres、onkeyyupなどを結びつけられます.たくさん並べなくなりました.もっと知りたいなら、DOMイベントを見てください.

 
 
        function hello(){ alert("hello world!"); }
  

2.JavaScriptコードの中でイベントを結びつけるJavaScriptコードの中で(すなわちScriptラベル内)バインディングイベントはJavaScriptコードとHTMLタグを分離できます.文書構造が明確で、管理と開発に便利です.

 

       document.getElementById(**"btn"**).onclick = function(){
           alert("hello world!"); }
       </scrip*> 
</code></pre> 
 <p>3.          <br>             <br> addEventListener()   attachEvent()          。      ，    。</p> 
 <h1> .    #</h1> 
 <p>      ，<br> W3C      3     ，       、    、    。<br> <em>  Netscape   JavaScript         （     ）。  IE               （     ）。  W3C         ，      、    、    。IE8  IE           （              ），IE9  IE    W3C  。</em><br> <strong>W3C  </strong><br>   ：<br> element.addEventListener(event, function, useCapture)<br> event : （  ）   ，     [DOM  ]<br> function：（  ）             。<br> useCapture：（  ）                。true，  。false，  。  false。<br> <em> ：IE8     。</em></p> 
 <pre><code class="python">
<input type="button" value="click me" id="btn1">
 <script>
       document.getElementById("btn1").addEventListener("click",hello);   
        function hello(){ alert("hello world!"); } 
 

IE標準文法:element.attachEvent(event, function)イベントタイプ.「on」を追加する必要があります.例えば、Oclick.function:(必須)イベントをトリガする関数を指定します.

 
 
        document.getElementById("btn2").attachEvent("onclick",hello);     
        function hello(){ alert("hello world!"); } 
 

イベント傍受のメリット
1、複数のイベントをバインドすることができます.

 
 
      var btn3 = document.getElementById("btn3"); 
      btn3.onclick =  function(){ alert("hello 1"); //   }
      btn3.onclick = function(){ alert("hello 2"); *//  } 
 

従来のイベントバインディングは最後のバインディングイベントのみ実行されます.2、対応するバインディングを解除することができます.

 
      var btn5 = document.getElementById("btn5");     
      btn5.addEventListener("click",hello1);//   
      btn5.addEventListener("click",hello2);//   
      btn5.removeEventListener("click",hello2); function hello1(){      
      alert("hello 1"); } function hello2(){ alert("hello 2"); }
  

パッケージイベント