JavaScript事件の秘密

一、事件の流れ
イベントフローは、ページからイベントを受け取る順序を説明する.IEのイベントフローはイベントバーストであり、Netscapeのイベントフローはイベントキャプチャフローである.
1、事件の泡が立つ
イベントの泡が発生し、すなわちイベントの最初は、最も具体的な要素(ドキュメント内のネストレベルの最も深いノード)によって受信され、その後、段階的に、最も具体的でないノード(ドキュメント)に中継される.下の図のようにボタンを押したら、外のdivをクリックしたら、最後にdocumentに伝達されると思います.小さい時から大きな伝播は水の中の魚の泡のように、小さい時から泡の道に入る過程です.
2、イベントキャプチャ
事件の捕獲は事件の泡立ちと正反対である.その考えは、あまり具体的ではないノードが、イベントをより早く受信するべきであり、最も具体的なノードが最後にイベントを受信する.
3、事件の三つの段階
イベントの3つの段階は、それぞれ捕獲段階、目標段階、発泡段階である.
二、イベントハンドラ
1、HTMLイベントハンドラ
HTMLイベントとは、JSを直接HTML要素に書き込むもので、例えば以下のコード:[プログラム1]

または[プログラム2]

    
    


    

        
    
    
    function showMsg(){
        alert("hello");
    }
    

HTMLイベントハンドラは明らかな欠点があります.HTMLとJSコードは緊密に結合されています.これはこの優れたプログラム設計ではありません.
2、DOM 0級イベントハンドラ
DOM 0レベルのイベントハンドラは、一つの行の数を一つのイベントハンドラの属性に割り当てるという伝統的な方法です.彼の長所は簡単で、ブラウザの長所を自慢することです.[プログラム3]

var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
     alert("    DOM0      ！");
}

このイベントが必要なら、こう書いてもいいです.

btn2.onclick = null;

以上がDOM 0級の事件の処理方法です.
3、DOM 2級イベントハンドラ
DOM 2レベルイベントは、イベントハンドラの指定と削除のための操作:addEventListener()とremoveEventListener()の2つの方法を定義しています.これらは三つのパラメータを受信します.処理するイベント名と、イベントハンドラの関数として、ブール値を指定します.彼はDOM 0級と同じく、複数のイベントハンドラを追加することができます.[プログラム5]

    
    
    


function showMsg(){
    alert("hello");
}
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn2.onclick = function(){
    alert("    DOM0      ！");
}
btn2.onclick = null;
//DOM2   
btn3.addEventListener("click",function(){
    //       
    alert(this.value);
},false);
//    
btn3.removeEventListener("click",showMsg,false);

ただし、IE 8-のブラウザでは動作できません.addEventListenerはサポートされていません.IE独自のDOM 2レベルのイベントハンドラがあります.(IE 11は実測可能で、IE 9、10はテストしたことがない)
4、IEイベントハンドラ
IEにも同様の2つの方法が提供されている.atachEvent()追加イベントdetachEvent()削除イベントの2つの方法は、同じ2つのパラメータを受信する.イベント処理プログラム名とイベント処理関数[プログラム6]

btn3.attachEvent("onclick",showMsg);

ここではまたイベントに「on」を追加します.これはDOM 2レベルのイベントハンドラと考えています.じゃ、ブラウザを自慢します.じゃブラウザをまたぐ問題はどう解決しますか?答えは、能力判断、つまりあなたがatachEvent()をサポートする能力はこれをあげます.あなたは他の能力があります.
5、ブラウザをまたぐイベントハンドラ
私たちは一つのオブジェクトにカプセル化しました.[プログラム7]

var eventUtil = {
    //    
    addHandle:function(element,type,handle){
        if (element.addEventListener) {
            element.addEventListener(type,handle,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handle);
        }else{
            element["on"+type] = handle;
        };
    },
    //    
    removeHandle:function(element,type,handle){
        if (element.removeEventListener) {
            element.removeEventListener(type,handle,false);
        }else if(element.dettachEvent){
            element.dettachEvent("on"+type,handle);
        }else{
            element["on"+type] = null;
        };
    }
}
//  
eventUtil.addHandle(btn3,"click",showMsg);

これでIEもChromeもよくサポートできます.
三、事件の対象
イベント対象イベント
1、DOM中のイベントの対象
(1)、type:イベントタイプを取得する[プログラム8]

function showMsg(event){
    alert(event.type);    //click
}

(2)、target:イベントターゲット[プログラム9]

function showMsg(event){
    alert(event.target.nodeName);    //input
}

(3)、stopPropagation()事件のバブルを防ぐために、私たちはすでに事件のバブルの概念を知っています.ボタンを押す時はボタンをクリックして、divに泡を立てないようにします.プログラムにevent.stopPropagation()を加えると、事件の泡を防ぐことができます.(4)、preventDefault()イベントのデフォルト行動を阻止します.例えば、ジャンプ、彼のデフォルト行動はリンクにジャンプします.それでは今はジャンプしないでください.彼に与えたイベントを実行します.では、このように書いてもいいです.event.prevent Default()
2、IE中のイベントオブジェクト
(1)、type:取得イベントタイプ(2)、srcelement:イベントターゲット(3)、cancel Bubble=true阻止イベントの泡立ち(4)、returnValue=false阻止イベントのデフォルト行動［プログラム10］

    
    
    


      
    
    var go = document.getElementById("go");
    go.onclick = function(event){
        if(event && event.preventDefault){
            event.preventDefault();
        }else{
            window.event.returnValue = false;
        }
        alert("     ");
    }
    

3、ブラウザのイベントオブジェクトを自慢する
DOMとIE中のイベントオブジェクトは異なるが、それらの間の類似性に基づいてブラウザを横切るスキームを依然として取り出すことができる.IEには、イベントオブジェクトのすべての情報と方法DOMオブジェクトがありますが、実装方法は異なります.しかし,この対応関係は二つのイベントモデル間のマッピングを容易にする.前に紹介したEventUtilオブジェクトを強化し、以下のような方法を追加して共通点を求めることができます.

getEvent: function(event){
    return event ? event : window.event;
},
getTarget: function(event){
    return event.target || event.srcElement;
},
preventDefault: function(event){
   if (event.preventDefault){
       event.preventDefault();
   } else {
       event.returnValue = false;
   }
},
stopPropagation: function(event){
    if (event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

一つ目はgetEvent()であり、イベントオブジェクトへの参照を返します.DOM対応のブラウザでは、イベント変数は簡単に着信およびリターンするだけです.IEでは、イベントパラメータは未定義であるため、window.eventに戻る.
第二の方法はgetTarget()であり,イベントのターゲットを返す.この方法の内部では、イベントオブジェクトのtarget属性が検出され、存在する場合はその属性の値が返される.そうでないと、srcelement属性の値を返します.
第3の方法は、イベントのデフォルト動作をキャンセルするためのpreventDefault()である.イベントオブジェクトに着信した後、この方法は、preventDefault()方法があるかどうかを確認し、存在する場合は、この方法を呼び出す.preventDefault()メソッドが存在しない場合は、returnValueをfalseに設定します.
第四の方法はstopPropagation()であり、その実現方法は類似している.まず、DOM方式を使ってイベントフローを阻止することを試みます.そうでなければ、cancel Bbble属性を使います.