【知識整理】3.3 DOM事件

1.DOMイベントのレベル
DOM 0:element.onclick=function(){}では、htmlのonclick属性にjs文を追加します.
DOM 2:element.addEvent Listener('click',function(){}false)、第三のパラメータがtrueであればキャプチャフェーズで呼び出され、falseに発泡フェーズで呼び出される(デフォルト);
DOM 3:element.addEvent Listener('keyup',function(){}false)は、イベントタイプが多く追加されました.例えば、マウスイベント、キーボードイベントなどです.
2.DOMイベントモデル(原理)
捕獲(上から下、true)、泡(現在の元素から上、false)のことです.
3.DOMイベントフロー
三つの段階、1イベントの捕獲段階、2目標段階、3イベントの発泡段階.
4.DOMイベントのキャプチャプロセス
キャプチャの具体的な流れ:window->document->>ラベル->body-..父->子.->ターゲット要素.これとは逆に発泡プロセスである.
小補充:
document.documentElementは、文書オブジェクトのルートノード()の参照であり、
Dom Documentオブジェクトの中のdyノードです.

        
                        
    
    
    //true      ,   window->document->html->body->ev，        ，        。
    //false      (  ),   ev->body->html->document->window
        var ev = document.getElementById("ev");

        //  
        ev.addEventListener("click",function(){
            console.log("ev captrue");
        },true);
        
        window.addEventListener("click",function(){
            console.log("window captrue");
        },true);

        document.addEventListener("click",function(){
            console.log("document captrue");
        },true);

        document.documentElement.addEventListener("click",function(){
            console.log("html captrue");
        },true);

        document.body.addEventListener("click",function(){
            console.log("body captrue");
        },true);

    //    
    //window captrue
    //document captrue
    //html captrue
    //body captrue
    //ev captrue
    
    

5.Eventオブジェクトの一般的なアプリケーション

1.DOM事件の原理(発泡、捕獲、およびプロセス).

.イベント(ユーザのインタラクションを傍受する)を登録する.

.応答するときはEventオブジェクトが重要です.

0.eventマウス値(pageX=event.client X+document.document Element.scrollTop_;document.body.scrollTop;)の図解Js eventオブジェクトoffsetX、clientX、pageX、screenX、layerX、x、x、キーボード値(everde Coevent.Cokede)を区別します.JS-イベントタイプ(マウスイベントでイベント対象となる独自の属性)
1.event.prevent Default()は、デフォルトイベント、例えばaラベルへのジャンプを阻止する.
2.event.stopPropagation()は、発泡イベントを阻止し、サブ要素応答イベントaをクリックし、親要素応答イベントbをクリックし、aをクリックするとイベントbの応答を停止する.
3.event.stopImmeditePropagation()、イベント応答優先度は、ボタンの中にイベントaとイベントbを同時に結びつけると、aの応答イベントにこの文を加えると、イベントbの実行を阻止する.
4.event.current Target()は、現在バインディングされているイベントオブジェクト、すなわち親要素である.(常に調べて、eg:一つのfor循環、一つのDOMにn個以上のイベントを登録しました.どう最適化しますか?)イベントエージェントは、サブ要素のイベントエージェントを父要素に移して、父要素に一度のイベントを結び付けてもいいです.応答する時、現在はどの要素がクリックされているかを区別します.
5.event.target()は、現在クリックされているサブ要素のうち、1つの親要素の下に10個のサブ要素があり、親要素に1回のイベントを結びつけるだけでいいです.どのサブ要素がクリックされたかを判断する必要があります.
6.イベントエージェント
原理:

事件泡立ち機構を通じて.

上のノードでイベントをバインディングし、e.targetを介して真のクリック要素

を取得する.

    a 1
    a 2
    a 3
    a 4
    .....
    
  


var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
    var target = e.target; //     a  
    if(target.nodeName === 'A'){
        alert(target.innerHTML);
    }
});

//             
function bindEvent(elem,type,selector,fn){
    if(fn === null){
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target ;
        if(selector){
            //  
            target = e.target;
            if(target.matches(selector)){
                fn.call(target,e);// target  this
            }
        }else{
            //    
            fn(e);
        }
    });
}
//  
bindEvent(div1,'click','a',function(e){
    e.preventDefault();
    console.log(this.innerHTML);//  ：   this
});
bindEvent(div1,'click',function(e){
     console.log(p1.innerHTML);
});

7.カスタムイベント

            var eve = new Event('custome');//         ，       

            ev.addEventListener('custome',function(){
                console.log('custome');
            });//ev   DOM  

            //       
            setTimeout(function(){
                ev.dispatchEvent(eve);
            },1000);


            //CustomEvent，       ，       obj      

     
    
var signin = new Event("event");//         ，       
    

        
        Event                 
    
    

    
var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });       ，       obj      
    

        
        CustomEvent                 
    
    
        var ev2 = document.getElementById("ev2");        
        var signin = new Event("event");
        ev2.addEventListener("event",function(){
            console.log("event dispatch");
        });
        setTimeout(function(){
            ev2.dispatchEvent(signin);//          signin，      event
        },1000);        

        var ev3 = document.getElementById("ev3");        
        var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });
        ev3.addEventListener("CustomEvent",function(e){
            console.log("CustomEvent dispatch");
            console.log(e);
            console.log(e.detail.name);
        });
        setTimeout(function(){
            ev3.dispatchEvent(signout);
        },1000);        
    

//    
//event dispatch
//CustomEvent dispatch
//CustomEvent {isTrusted: false, detail: {…}, type: "CustomEvent", target: div#ev3, currentTarget: div#ev3, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falsedetail: {name: "ld", sex: "female"}eventPhase: 0isTrusted: falsepath: (5) [div#ev3, body, html, document, Window]returnValue: truesrcElement: div#ev3target: div#ev3timeStamp: 37.19999999884749type: "CustomEvent"__proto__: CustomEvent
//ld