JavaScriptの権威あるデザイン--イベントバブル、キャプチャ、イベントハンドル、イベントソース、イベントオブジェクト(簡単な学習ノート18)...

1.イベントバブルとイベントキャプチャ
2.イベントとイベントハンドル
 
3.イベント依頼:イベントの発泡技術を利用する.サブエレメントのイベントは、最終的に親エレメントとノードまでバブルします.イベントリスニングでは、サブエレメントからバブルが発生したイベントが分析されます.
イベント依頼のメリット:
    1.各関数はオブジェクトで、メモリが消費されます.メモリ内のオブジェクトが多ければ多いほど、パフォーマンスが悪くなります.
    2.すべてのイベントハンドラによるDOMアクセス数を事前に指定する必要があり、ページ全体のインタラクション準備時間が遅延します.
イベントが多いことによるパフォーマンスの低下をどのように処理するか:
1.履歴書の接続数を制限するイベント依頼技術
2.不要なときにイベントハンドラを削除する
例:
html:

<div id="myDiv">
    <input type="button" value="  " id="myBtn">
div>

 
js:

var btn=document.getElementById("myBtn");
btn.onclick=function(){

    document.getElementById("myDiv").innerHTML="Progress...";
}

 
注:innerHTMLを設定するとボタンを移動できますが、イベントハンドラはボタンとともにイベントハンドラの参照をメモリに保存します.
手動で削除したほうがいいです.
 

var btn=document.getElementById("myBtn");
btn.onclick=function(){
    btn.onclick=null;//        
    document.getElementById("myDiv").innerHTML="Progress...";
}

    
 
4.イベントオブジェクトとイベントソース

function eventHandler(e){
    //       
e = e || window.event;//IE Chrome  window.event FF  e 
    //      
var target = e.target || e.srcElement;//IE Chrome  srcElement FF  target 
}

 
5.イベントのデフォルト動作をキャンセルする

function eventHandler(e) {
    e = e || window.event;
    //        
    if (e.preventDefault) {
        e.preventDefault();//IE   
    } else {
        e.returnValue = false;//IE 
        //  ：        return false    
        //return false       
    }
}

 
6.発泡防止

function myParagraphEventHandler(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();//IE   
    } else {
        e.cancelBubble = true;//IE 
    }
}

 
7.eventとtarget
event:イベントを含むすべてのステータスを表します.
target:イベントをトリガーする要素.
CurrentTarget:イベントバインドの要素.
両者の違いに注意している.
html:

<ul id="ulT">
<li class="item1">fsdali>
<li class="item2">ewreli>
<li class="item3">qeweli>
<li class="item4">xvcli>
<li class="item5">134li>
ul>

js:

document.getElementById("ulT").onclick = function  (event) {
    console.log(event.target);
    console.log(event.currentTarget);
}