ホームページ > 記事 > ウェブフロントエンド > JavaScriptの学習でよく遭遇するjsイベントハンドラー

JavaScriptの学習でよく遭遇するjsイベントハンドラー

php是最好的语言オリジナル: 2018-07-26 12:43:451511ブラウズ

イベントのイベントハンドラーを指定するには、主に 3 つの方法があります。 1. html イベントハンドラー: まず第一に、このメソッドは時代遅れです。 2. DOM レベル 0 イベントハンドラー: このメソッドはシンプルでクロスブラウザーですが、要素に追加できるイベントハンドラー関数は 1 つだけです。 DOM2 レベルのイベントハンドラー: DOM2 レベルのイベントハンドラーは、要素に対して複数のイベントハンドラーを追加できます。

1. イベントハンドラー

前に述べたように、イベントはユーザーまたはブラウザ自体によって実行される特定のアクションです。クリック、ロード、マウスオーバーなどはイベントの名前です。イベントに応答する関数をイベントハンドラ（イベントハンドラ、イベントハンドラともいう）といいます。イベントハンドラーの名前は「on」で始まるため、クリックイベントのイベントハンドラーは onclick、load イベントのイベントハンドラーは onload になります。

イベントのイベントハンドラーを指定するには、主に 3 つの方法があります。

1. HTMLイベントハンドラー

まず、このメソッドは時代遅れです。アクション (JavaScript コード) とコンテンツ (HTML コード) は密接に結合しているためです。ただし、小さなデモを作成する場合には引き続き使用できます。

このメソッドには 2 つのメソッドもあり、どちらも非常に簡単です:

1 つ目: イベントハンドラーと含まれるアクションを HTML に直接定義します。

コードは次のとおりです:

88ee14391983dff0919134c61f7ad1b0

2 番目: HTML でイベントハンドラーを定義し、実行されたアクションは他の場所で定義されたスクリプトを呼び出します。

コードは次のとおりです:

88ee14391983dff0919134c61f7ad1b03f1c4e4b6b16bbbd69b2ee476dc4f83afunction showMessage(){alert("clicked!");}

注:

1) イベント自体には、イベント変数を通じて直接アクセスできます。たとえば、onclick="alert(event.type)" とすると、クリックイベントがポップアップされます。

2) この値は、ターゲット要素が入力されるイベントのターゲット要素と等しくなります。たとえば、onclick="alert(this.value)" は、input 要素の値を取得できます。

2. DOM レベル 0 イベントハンドラー

このメソッドはシンプルでクロスブラウザーですが、1 つの要素に 1 つのイベントハンドラーしか追加できません。

このメソッドは複数のイベントハンドラーを要素に追加するため、後のイベントハンドラーが前のイベントハンドラーを上書きします。

イベントハンドラーの追加:

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
 alert("clicked!");
}
</script>

イベントハンドラーの削除:

コードは次のとおりです:

myBtn.onclick=null;

3. DOM2 レベルのイベントハンドラー

DOM2 レベルのイベント処理プログラムは複数のイベントハンドラーを要素に追加できます。イベントハンドラーを追加および削除するための 2 つのメソッド、addEventListener() と RemoveEventListener() が定義されています。

どちらのメソッドも、イベント名、イベント処理関数、ブール値の 3 つのパラメーターが必要です。

このブール値は true、イベントはキャプチャフェーズで処理され、false、イベントはバブリングフェーズで処理されます。デフォルトは false です。

イベントハンドラーの追加: 次に、ボタンに 2 つのイベントハンドラーを追加します。1 つは「hello」をポップアップし、もう 1 つは「world」をポップアップします。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.addEventListener("click",function(){
  alert("hello");
 },false);
 myBtn.addEventListener("click",function(){
  alert("world");
 },false);
</script>

イベントハンドラーの削除: addEventListener を通じて追加されたイベントハンドラーは、removeEventListener を通じて削除する必要があり、パラメーターは一貫している必要があります。

注: addEventListener を通じて追加された匿名関数は削除できません。以下のコードは機能しません。

コードは次のとおりです:

myBtn.removeEventListener("click",function(){alert("world"); },false);

removeEventListenerはaddEventListenerパラメータと一致しているようです上記では説明しましたが、実際には 2 番目の匿名関数のパラメータがまったく異なります。

したがって、イベントハンドラーを削除するには、コードは次のように記述できます:

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler=function(){
  alert("hello");
 }
 myBtn.addEventListener("click",handler,false);
 myBtn.removeEventListener("click",handler,false);
</script>

2. IE イベントハンドラー

1. 実際のアプリケーションシナリオ

IE8 以下のブラウザーは addEventListener をサポートしません。実際の開発ではIE8以下のブラウザに対応させたい場合。ネイティブバインディングイベントを使用し、互換性処理を行う必要がある場合は、代わりに jquery のバインドを使用できます。

2. IE8 イベントバインディング

IE8 以下のブラウザは、DOM のメソッドと同様の 2 つのメソッド、attachEvent() と detachEvent() を実装します。

どちらのメソッドも、イベントハンドラー名とイベントハンドラー関数という 2 つのパラメーターが必要です。

注:

IE11 は addEventListener のみをサポートします。

IE9 と IE10 は、attachEvent と addEventListener の両方をサポートしています。

TE8以下のバージョンはattachEventのみをサポートします!

次のコードを使用して、IE ブラウザのさまざまなバージョンでテストできます。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handlerIE=function(){
  alert("helloIE");
 }
 var handlerDOM= function () {
  alert("helloDOM");
 }
 myBtn.addEventListener("click",handlerDOM,false);
 myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world

<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert("hello");
 });
 myBtn.attachEvent("onclick",function(){
  alert("world");
 });
</script>

note:这里运行效果值得注意一下：

IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。

和DOM事件一样，添加的匿名函数将无法删除。

所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler= function () {
  alert("hello");
 }
 myBtn.attachEvent("onclick",handler);
 myBtn.detachEvent("onclick",handler);
</script>

note:IE事件处理程序中还有一个地方需要注意：作用域。

使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。

而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

下面例子会弹出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert(this===window);
 });
</script>

在编写跨浏览器的代码时，需牢记这点。

IE7\8检测：

//判断IE7\8 兼容性检测
   var isIE=!!window.ActiveXObject;
   var isIE6=isIE&&!window.XMLHttpRequest;
   var isIE8=isIE&&!!document.documentMode;
   var isIE7=isIE&&!isIE6&&!isIE8;
   if(isIE8 || isIE7){
    li.attachEvent("onclick",function(){
     _marker.openInfoWindow(_iw);
    }) 
   }else{
    li.addEventListener("click",function(){
     _marker.openInfoWindow(_iw);
    })
   }

以上所述是小编给大家介绍的JavaScript事件学习小结(二)js事件处理程序的相关知识，希望对大家有所帮助！

JavaScriptの学習でよく遭遇するjsイベントハンドラー

相关推荐：

関連記事