Javascriptはブラウザ環境にある(六)イベント

7187 ワード

JavaScript ブラウザ IE Opera firefox

イベント
事件の例が多くなりました.ユーザーが入力したり、ボタンをクリックしたりします.一つのjavascript関数を一つのイベント(これはイベントモニターまたはイベントプロセッサと呼ばれる)に割り当てることができます.イベントが発生したら、この関数を実行します.

内蔵のHTML属性に基づいて
時間を追加する一番早い方法はこれまでの属性に直接追加することです.コードは以下の通りです.

<div onclick="alert('aaa!')">click</div>

ユーザーがこのdivをクリックすると、alert('aaa')が実行されます.この方式はこのイベントを監督するための明確な関数ではないことが分かったが、この関数はバックグラウンドで作成された.

要素の属性
もう一つの方法は、要素の属性に関数を割り当てることです.コードは以下の通りです

<div id="my-div">click</div>
<script type="text/javascript">
  var myelement = document.getElementById('my-div');
  myelement.onclick = function() {
    alert('aaa!');
    alert('bbb!');
  }
</script>

この方法は最初の方式よりずっといいと思います.これはhtmlコードとjavascriptコードの分離を実現しました.htmlの役割は内容にあり、javascriptは行為であり、cssは様式に用いられる.私たちはできるだけこの3つの部分を分離させます.
欠点は柔軟性が足りないので、一つの関数で一つのイベントを監督するしかないです.次の方法でこの問題を解決できます.
DOMイベントモニター
最高の方法は、時間モニターを使用して、多くの関数でイベントを傍受することができます.イベントが発生すると、すべての傍受の関数が実行されます.すべての関数は独立しています.他の関数を管理する必要はありません.コードは以下の通りです

var mypara = document.getElementById('my-div');
mypara.addEventListener('click', function() {alert('Boo!')}, false);
mypara.addEventListener('click', console.log, false);

このところjavascriptはaddEventListenerでclickイベントを傍受します.最初のパラメータはイベントの種類であり、第二のパラメータは関数であり、匿名関数も可能である.clickイベントが発生すると関数が実行され、イベントオブジェクトに入る.

事件の捕獲と発泡
以下は詳細に説明します.addEvent Listener()の三つ目のパラメータです.

<body>
  <ul>
    <li><a href="http://phpied.com">my blog</a></li>
  </ul> 
</body>

このリンクをクリックすると、もちろん同じようにli、ul、bodyをクリックします.clickリンクはこのdocumentをクリックしたのと同じです.これが事件の広がりです.事件の伝播は二つの方法で実現できる.

時間の獲得-このクリックイベントはまずdocumentの上で発生して、それからbodyで、それからulで、それからliで、最後にaです.

事件の泡立ちは前のプロセスと正反対です.まずaからdocumentに伝えます.

DOM 2規範提案イベントの伝搬は三つの段階に分けられる.キャッチ、ターゲット、泡.document->'aからa''document.という意味です.イベント対象はevent Phite属性があり、現在の段階に戻ることができます.

残酷な現実を語りなさい.みんなはすべて歴史の上でieとnetscapeなことを知っていて、それらはすべて規範の一部を実現しました.IEは発泡体であり、netsscapeはキャプチャされる.今firefox、operaは三つの段階を実現しました.しかし、ieはまだ泡が立っています.

事件の伝播の実際的意義について見ます.

第3のパラメータは、イベントの伝播を使用するかどうかである.一般的にブラウザを跨ぐために、このパラメータはfalseと泡の実現方法を設定したほうがいいです.

は、イベントの広がりをモニタで制御することができる.だから泡が出るのを止めることができます.私たちはイベントの対象となるstopPropopopopoppegationの方法を使うことができます.

イベントエージェントを使ってもいいです.divに10ボタンがあれば、各ボタンにモニターを追加することができます.でも一番いい方法はdivを監督することです.イベントが発生したら、どのボタンがクリックされたかを判断すればいいです.

IEでは、setCaptureとreleaseCaptureの方法が用いられているが、マウスイベントのみに適用される.

事件の広がりを止める

<p id="closer">final</p>

関数を使用して、clickイベントを処理します.

function paraHandler(){alert('clicked paragraph');}

次にこの関数をイベントのモニターにします.

var para = document.getElementById('closer');
para.addEventListener('click', paraHandler, false);

続いて、document、body、windowにモニターを追加します.

document.body.addEventListener('click', function(){alert ('clicked body')}, false);
document.addEventListener('click', function(){alert ('clicked doc')}, false);
window.addEventListener('click', function(){alert('clicked window')}, false);

注意したいのは、DOM仕様はwindowに関するイベントに言及していません.DOMはDOCUMENTとブラウザを扱っています.IEはwindowのイベントの伝播がないので、firefoxはできます.

私たちはテストします.実行の手順は以下の通りです.
clicked paragraph clicked body clicked doc clicked window

これは事件の広がりを見ることができる.addEventLister()とは逆の方法はremoveveveventListener().パラメータは同じです.このモニターを外しましょう.

para.removeEventListener('click', paraHandler, false);

そうすれば、次のような結果になります.
clicked body clicked doc clicked window

事件の広がりをどう止めるかを見てみましょう.stopPropagationを呼び出すことができます.

function paraHandler(e){
  alert('clicked paragraph');
  e.stopPropagation();
}
para.addEventListener('click', paraHandler, false);

私たちは再びpをクリックすると、一つのalertだけがポップアップされます.事件は流布を停止した.

なお、removeveEventListenerが匿名関数を削除できない場合、この2つの匿名関数はメモリ2つであり、以下のコードはモニターを削除することができない.

document.body.removeEventListener('click',
    function(){
        alert('clicked body')
    }, 
false); //         。

デフォルトの行動を阻止する
多くのブラウザイベントにはデフォルトの行動があります.例えばlinkはその例です.あなたのclick linkのデフォルトの行動は別のページに移動することです.私たちはこのリンクの行為を禁止することができます.私たちはpreventDefault()方法を呼び出して実現できます.

以下の例は、clickリンク後に提示情報が表示されます.を選択します.コードは以下の通りです

//           
var all_links = document.getElementsByTagName('a'); 
for (var i = 0; i < all_links.length; i++) { //     
  all_links[i].addEventListener(
    'click', //      
    function(e){     
      if (!confirm('Are you sure you want to follow this link?')){
        e.preventDefault();
      }
    },
    false); //      false
}

すべての事件が阻止できるわけではないので注意してください.

ブラウザをまたぐイベントモニター
現在のブラウザのほとんどはDOM 1仕様をサポートしています.DOM 2仕様になる前に、イベントは正規化されていません.大量のブラウザイベントの互換性が問題になっています.セグメントコードを先に見ます

document.addEventListener('click', function(e){}, false);

IEの中に何か違いがあるか見てみましょう.

は、IEにaddEvent Listener方法がない.IE 5の後にatachEvent

を使用することができます.

atachEventを使用すると、clickがonclickになります.

タグ属性があれば、イベントを傍受するために、イベントオブジェクトが関数に入ってくることはない.(前の二つのイベントを実現するという方法です.)IEでは、どのような方法であれ、IEはwindow.eventに伝えられます.

は、IEにおいて、どの要素上のイベントが発生したかを知るために、タージ属性を取得しない.しかし、我々はこれをsrcellementで置き換えることができます.

以前にも言ったように、IEにはイベントの捕獲がなく、イベントの泡だけがある.

は、stopPropagation()方法がなく、cancel Bubble属性がtrueであるように設定できます.

は、preventDefault()の方法ではなく、returnValueをfalseに置き換えています.

.モニターを削除することは、removevevevevevent Listener()の代わりにdetachEvent()を使用することができる.

次はブラウザをまたぐ例を書きます.

function callback(evt) {
  evt = evt || window.event;//  evt   ，   ie，  evt  window.event.
  //  target    ，       ie evt.srcElment      target.
  var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
  //           。

}
//       click  。
if (document.addEventListener){ //       FF
  document.addEventListener('click', callback, false); 
} else if (document.attachEvent){ //      IE
  document.attachEvent('onclick', callback);
} else {//      
  document.onclick = callback;
}

イベントの種類
上記の例は、clickイベントに対して、以下のようにイベントの種類です.これらのイベントは各ブラウザで共通のイベントです.ブラウザごとにイベントが異なります.他に特殊なイベントが必要なら、ドキュメントを見に行きます.

マウス事件:mouseup、mousedown、click(mousedown、mouseupの連続)、dbclick

キーボードイベント:keydown,keyphes,keyup.

ロード、1つの画像またはページ、およびそのすべての要素のロードが完了したイベントは、Unload-ユーザがページから離れます.beforeunload-一般的にユーザーがページを離れることをヒントにします.

abort:firefoxでは、ユーザがページの読み取りを停止し、IEではピクチャの読み取りを停止する.

error:IEとFirefoxの中でjavascriptはエラーを報告したり、IEの中では、ピクチャは読み取れません.

resize:ブラウザのサイズが変更されました.scoll、ページscollの時、contextmenu(右クリックのメニュー)

focus-フォーム

に入ります.

blur-フォームを残して

change-値が変更された後、フォームを離れます.

select-textドメインからtext

を選択します.

リセット、submit...

javascriptを使ってページの各フォーム間のデータ転送を行います.