JavaScript登録イベント処理関数の説明例_JavaScriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript登録イベント処理関数の説明例_JavaScriptスキル

May 16, 2016 pm 03:20 PM

javascript イベント処理登録する

イベントは JavaScript の中核となるコンテンツであり、その重要性についてはここでは紹介しません。イベントがトリガーされた後、それを処理するイベント処理関数が必要になります。たとえば、ボタンがクリックされたときに div の背景が緑色に設定されるように定義できます。次に、それを実現する方法を見てみましょう。この効果のコード例は次のとおりです:

&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=" utf-8"&gt; 
&lt;title&gt;javascript如何注册事件处理函数&lt;/title&gt;
&lt;style type="text/css"&gt;
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="mydiv"&gt;&lt;/div&gt;
 &lt;button id="bt"&gt;点击查看效果&lt;/button&gt; 
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記のコードでは、ボタンをクリックすると div の背景色が緑色に設定されます。これは、コードがボタンの onclick イベントのイベントハンドラー関数を登録しているためです。この関数は div の背景色を設定できます。緑に。オブジェクトイベントのイベント処理関数を登録する方法を例を示して簡単に紹介します:
方法 1:
イベントハンドラー関数を HTML コードに直接登録する、つまり HTML 属性によってイベントハンドラー関数を直接設定するこのメソッドは、HTML の属性値として使用されます。記事の。メリットとデメリットは次のとおりです。

1. 理解しやすく、使いやすい。
2. すべての主要なブラウザがこのメソッドをサポートしています。
3. HTML コードが混在しているため、ページが非常に複雑になり、パフォーマンスとコンテンツの分離の原則に矛盾します。
4. 同じオブジェクトには、同じ種類のイベントハンドラーを 1 つだけ登録できます。

方法 2:
イベントハンドルモード、いわゆるイベントハンドルはイベント処理機能であり、指定されたオブジェクトの指定されたイベントがイベントハンドラに相当します。この方法でイベント処理関数を登録するには、まずオブジェクトへの参照を取得し、次にイベントハンドルをオブジェクトの対応するイベント処理関数属性に割り当てる必要があります。実際、メソッド 1 も一種のイベントハンドラーメソッドです。
コード例は次のとおりです:

&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=" utf-8"&gt; 
&lt;title&gt;javascript如何注册事件处理函数&lt;/title&gt;
&lt;style type="text/css"&gt;
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="mydiv"&gt;&lt;/div&gt;
 &lt;button id="bt"&gt;点击查看效果&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記のコードでは、まず document.getElementById("bt") を使用してボタンオブジェクトの参照を取得し、次にイベントハンドル (イベントハンドラー関数) をボタンオブジェクトの onclick イベント属性に割り当てます。 onclick イベントはボタンがクリックされるとトリガーされ、イベントハンドラーでコードが実行されます。メリットとデメリットは次のとおりです。

1. シンプルでわかりやすい。
2 つのブラウザでサポートされています。
3. 同じオブジェクトには、同じ種類のイベントハンドラーを 1 つだけ登録できます。

方法 3:
これは、より高度なイベント登録メソッド、つまりイベントリスナーです。このメソッドは、指定されたオブジェクトに指定された種類のイベントのハンドラー関数が 1 つしか登録できないという問題を解決します。ただし、以下に示す特定の互換性の問題があります:
1).IE ブラウザ:
IE ブラウザでは、attachEvent() メソッドと detachEvent() メソッドを使用して、指定したオブジェクトのイベント処理関数を登録したり、登録されたイベント処理関数を削除したりできます。
構文形式は次のとおりです:
element.attachEvent("onevent",eventListener)
この関数には 2 つのパラメータがあり、最初のパラメータはイベントタイプの名前、2 番目のパラメータは登録するイベントハンドラ関数です。
コード例は次のとおりです:

&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=" utf-8"&gt; 
&lt;title&gt;javascript如何注册事件处理函数&lt;/title&gt;
&lt;style type="text/css"&gt;
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
  
 bt.attachEvent("onclick",changebg);
  
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="mydiv"&gt;&lt;/div&gt;
 &lt;button id="bt"&gt;点击查看效果&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記のコードは、attachEvent() 関数を使用してボタンの onclick イベントハンドラーを登録しますが、これは IE ブラウザーでのみ有効です。 detachEvent() 関数を使用して、最初に登録されたイベント処理関数を切り離します。構文形式は次のとおりです。
element.detachEvent("onevent",eventListener) 形式はattachEvent()関数と同じです。
特記事項: 最初のパラメータには on を含める必要があります。たとえば、クリックイベントは「onclick」と記述する必要があります。

2) 標準ブラウザ: 標準ブラウザ（IE9およびIE9以降のブラウザを含む）では、addEventListener()関数およびremoveEventListener()関数を使用して登録処理関数の登録および削除を行います。
構文形式は次のとおりです:
element.addEventListener('event',eventListener,useCapture);
この関数には 3 つのパラメータがあります。最初のパラメータは、登録されるイベントハンドラ関数です。3 番目のパラメータは、このハンドラ関数がイベント配信プロセスのキャプチャフェーズ中に呼び出されるか、バブルアップされるかを指定します。ステージが呼び出されます。デフォルトの条件では、このプロパティの値は false です。これは、イベントハンドラーがバブリングステージ中に呼び出されることを意味します。
特記事項: 最初のパラメータに on を含めることはできません。たとえば、クリックイベントを「onclick」と記述することはできませんが、「click」と記述する必要があります。
コード例は次のとおりです:

&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=" utf-8"&gt; 
&lt;title&gt;javascript如何注册事件处理函数&lt;/title&gt;
&lt;style type="text/css"&gt;
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
  
 bt.addEventListener("click",changebg);
  
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="mydiv"&gt;&lt;/div&gt;
 &lt;button id="bt"&gt;点击查看效果&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  //移除注册
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };