•AddEventListenerには、以下に示すように3つのパラメーターがあります。
Element.AddeventListener（タイプ、リスナー、UseCapture）;
| パラメーター | パラメーターの説明 |
|---|---|
| 要素 | イベントとHTMLノードをバインドするオブジェクト。 |
| タイプ | イベント名については、イベントの前に「オン」を削除してください。たとえば、「OnClick」は「クリック」として記述する必要があり、「オンマウスオーバー」は「マウスオーバー」として記述する必要があります。 |
| リスナー | イベントリスニング機能にバインドするには、関数名のみを書くように注意してください。ブラケットは含まれていません。 |
| usercapture | イベント監視方法は真実であり、偽りであることができます。真に、キャプチャモードを採用します。 false、バブルモードの採用。特別な要件がない場合、それは一般的に偽です。 |
ここでは、キャプチャモードとバブルモードの違いについて話す必要があります。
図に示すように、Div要素の2つのレイヤーがあり、どちらもクリックイベントを設定しています。一般的に言えば、内側の青い要素をクリックすると、青い要素のクリックイベントをトリガーするだけでなく、同時に赤い要素のクリックイベントをトリガーします。 UseCaptureパラメーターは、現時点でTwo Clickイベントの順序を制御することです。 FALSEの場合、バブルモードが使用されます。これは内側からのプロセスであるため、青い要素のクリックイベントが最初に実行され、次に赤い要素のクリックイベントが実行されます。それが本当なら、それはキャプチャモードです。バブルモードとは対照的に、それは外側から内側までです。赤い要素のクリックイベントは、青い要素のクリックイベントが実行される前に最初に実行されます。
異なるレイヤーの要素で使用される使用担当者が異なる場合、ターゲット要素はまず、最も外側の要素からモードをキャプチャするように設定されたイベントを探します。ターゲット要素に到達してターゲット要素のイベントを実行した後、バブルモードに設定されたイベントを調べます。
•AttachEventには、以下に示すように2つのパラメーターがあります。
Element.Attachevent（タイプ、リスナー）;
| パラメーター | パラメーターの説明 |
|---|---|
| 要素 | イベントとHTMLノードをバインドするオブジェクト。 |
| タイプ | イベント名については、「OnClick」や「OnMouseOver」など、イベントの前に「オン」を追加してください。これはAddEventListenerとの違いです。 |
| リスナー | イベントリスニング機能にバインドするには、関数名のみを書くように注意してください。ブラケットは含まれていません。 |
AddEventListener（）は、W3Cでサポートされているイベントリスニング機能をバインドする標準的な方法です。 Chrome、Firefox、Opera、Safari、IE9.0以降は、この機能をサポートしています。ただし、IE8.0以下はこの方法をサポートしていません。AttachEvent（）を使用してイベントリスニング機能を結合します。したがって、このバインディングイベント方法は、ブラウザの互換性の問題に対処する必要があります。
IEおよび非IEブラウザイベントバインディングと互換性のあるコード：
関数addEvent（obj、type、handle）{try {// chrome、firefox、opera、safari、ie9.0以降のバージョンobj.addeventlistener（type、handle、false）; } catch（e）{try {// ie8.0以下のバージョンobj.attachevent（ 'on' + type、handle）; } catch（e）{// Early Browser obj ['on' + type] = handle; }}}または
function regevent（ele、event_name、fun）{if（window.attachevent）ele.attachevent（event_name、fun）; // ie browser else {event_name = event_name.replace（/^on/、 ""）; //開始時の場合、onclick-> [ele.addeventlistener（event_name、fun、false]をクリックします。 //非IEブラウザ}}上記の記事では、AddEventListenerとAttachEventの違いについて簡単に説明しています。私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。