[js点滴]JavaScript事件詳細解01

イベントオブジェクト
目次
イベントは、非同期プログラムの実現形態であり、本質的には、プログラムの各構成要素間の通信である.DOMは大量のイベントをサポートしています.今回はDOMのイベントプログラムを紹介します.
EventTargetインターフェース
DOMのイベント動作(傍受およびトリガ)は、いずれもEventTargetインターフェースで定義されている.Elementノード、documentノード、windowオブジェクトは、このインターフェースを展開している.また、XMLHttpRequest、AudioNode、AudioContextなどのブラウザには、オブジェクトが内蔵されており、このインターフェースも配置されている.
インターフェースは、イベントをトリガするためにaddEventListenerおよびremoveEventListenerをバインディングおよび削除するための3つの方法である.
addEvent Listener()dispatchEvent方法は、現在のノードまたはオブジェクトにおいて、特定のイベントの傍受関数を定義するために使用される.

//     
target.addEventListener(type, listener[, useCapture]);

//実例window.addEventListener(‘load’,function(){…}false);request.addEvent Listener(‘readystatechange’,function(){…}false);addEventListener方法は、3つのパラメータを受け入れる.

addEventListener:イベント名、サイズ書きに敏感です.

type:傍受関数.イベントが発生すると、その傍受関数が呼び出しられます.

listener:ブール値は、傍受関数がキャプチャフェーズ(capture)でトリガされたかどうかを示す(後述する「イベントの伝搬」部分を参照).デフォルトはuseCaptureである.古いブラウザでは、このパラメータは必ず書きます.新しいバージョンのブラウザでは、このパラメータを選択できます.互換性を保つためには、常にこのパラメータを記入することをおすすめします.

次は一例です.

function hello() {
  console.log('Hello world');
}

var button=document.getElemenntById(‘btn’);button.addEvent Listener(‘click’,hello,false);
上記のコードにおいて、false方法はaddEventListener要素ノードであり、buttonイベントの傍受関数clickを結びつけている.hello方法は、現在のオブジェクトの同じイベントに対して、複数の傍受関数を追加することができる.これらの関数は、追加順序でトリガされます.すなわち、先にトリガを追加します.同じイベントのために複数の同じ傍受関数を追加すると、この関数は一回だけ実行され、余分な追加は自動的に取り除かれます.

function hello() {
  console.log('Hello world');
}

document.addEvent Listener(‘click’,hello,false);document.addEvent Listener(‘click’,hello,false);
上のコードを実行して、ドキュメントをクリックして1行だけaddEventListenerを出力します.
モニター関数にパラメータを転送したい場合は、匿名関数で待ち受け関数を包装してもいいです.

function print(x) {
  console.log(x);
}

var el=document.getElemenntById(‘div 1’);el.addEvent Listener(‘click’,function(){print(‘Hello’)},false);
上記のコードは匿名関数によって、1つのパラメータを傍受関数removeEventListenerに伝達する.
removeveEvent Listener()Hello world方法は、print方法によって追加されたイベント傍受関数を除去するために使用される.

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

removeEventListener方法のパラメータは、addEventListener方法と完全に一致している.その最初のパラメータは「イベントタイプ」で、書き込みに敏感です.removeEventListener方法で除去された傍受関数は、対応するaddEventListener方法のパラメータと完全に一致していなければならず、同じ要素ノードでなければ無効であることに留意されたい.
dispatch Event()removeEventListener方法は、現在のノードにおいて指定されたイベントをトリガし、これにより、傍受関数の実行をトリガする.この方法は、1つの傍受関数がaddEventListenerを呼び出すと、dispatchEventに戻り、そうでなければEvent.preventDefault()になるブール値を返す.

target.dispatchEvent(event)

false方法のパラメータは、trueオブジェクトの一例である.

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);

上のコードは、現在のノードでdispatchEventイベントをトリガしている.Event方法のパラメータが空である場合、または有効なイベントオブジェクトでない場合、エラーが発生します.
以下のコードは、click方法の戻り値に基づいて、イベントがキャンセルされたかどうかを判断する.

var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    console.log('    ');
  } else {
    console.log('     ');
  }
}

待ち受け関数
傍受関数はイベントが発生したときにプログラムが実行する関数です.イベント駆動プログラミングモードの主なプログラミング方式です.
DOMは三つの方法を提供し、イベントバインディングのための傍受関数として利用できる.
HTMLタグのon-属性
HTML言語は、要素ラベルの属性において、イベントの待ち受けコードを直接定義することができます.

 "doSomething()">
 onclick="console.log('    ')">
 
  
 
  
     body   load  、div   click  ，       。
 
  
             ，         。
 
  
  ，       ，on-            ，   “    ”。
 
  
 
   

 "doSomething()">
「doSomething」
  されたイベントが  すると、dispatchEvent  の はそのままJavaScriptエンジンに  されて  される.したがって、  を  する  は、ペアの  を  することを れないでください.
また、ElementノードのdispatchEvent  は、 はこのような  を  しています.
el.setAttribute('onclick', 'doSomething()');
Elementノードのイベント  
Elementノードにはイベント  があり、    を  することができます.
window.onload = doSomething;
div.onclick=function{consolie.log}
この  で  されたモニター  を  して,    でのみトリガされる.
addEvent Listener  on-ノード、setAttributeノード、Elementオブジェクトのdocument  によって、イベントの    を  することもできる.
window.addEventListener('load', doSomething, false);
addEvent Listener  の  は、  のEventTargetインターフェースの  を  してください.
  の3つの  では、  の「HTMLタグのon-プロパティ」は、HTMLとJavaScriptコードを  する  に  しています.  の「Elementノードのイベント  」の  は、 じイベントは つの    しか  できないということです.つまり、  のonclick  を  すると、 の  は  をカバーします.したがって、この2つの  は、プログラムの   のためでない り、すべてのブラウザがこの2つの  をサポートしています.
addEvent Listenerは、  される    を  する  です. のような  があります.
は、 じイベントに して  の    を  することができる.
は、どの  (    かそれとも    か)において、リスニングバック  をトリガするかを  することができる.
は、DOMノードの に、window、XMLHttpRequestなどのオブジェクトの に  することができ、JavaScript  を  した    インターフェースに しい.
thisオブジェクトの  
  のプログラミングでは、リスニング    のthisオブジェクトは、トリガイベントのElementノードを すことが い.
addEventListenerメソッドで  された    は、  のthisオブジェクトは、 にトリガイベントのノードを す.
// HTML   
// 
Hello
var id=‘doc’var para=document.getElemenntById(‘para’);
function hello(){consolie.logs(this.id)}
para.addEvent Listener(‘click’,hello,false);
 のコードを  してpノードをクリックすると、paraが  されます.これは    が「コピー」されてノードの  になり、 の き を うと、よりよく えるからです.
para.onclick = hello;
Elementノードのon  の に    が  されている  、thisはイベントをトリガする  ノードを しません.
 id="para" onclick="hello()">Hello


  pElement.setAttribute('onclick', 'hello()');

 のコードを  して、pノードをクリックしてdocを  します.これはここではハロー  だけを び すためであり、ハロー  は  にグローバルスコープで  され、  のコードに  するからである.
para.onclick = function(){
  hello();
}
 つの   は、  のスコープを  せずに、  にオン  に  するコードを き むことである.オン  は  のノードで  されるためです.
 id="para" onclick="console.log(id)">Hello

 id="para" onclick="console.log(this.id)">Hello
 の  、  に  するのは  パラです.
まとめてみますと、  のように くthisの  はすべてElementノードを します.
// JavaScript  
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}
//HTMLコード  の  のthisオブジェクトは、  のオブジェクトを します.
// JavaScript  
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');
//HTMLコード