javascript事件の基礎知識

10881 ワード

javascript 事件が勃発するイベントエージェントイベントバインドイベント依頼

何が事件ですか
javascriptとHTMLの相互作用はイベントを通じて実現され、イベントは文書またはブラウザのウィンドウで発生する特定のインタラクションの瞬間である.イベントは、ブラウザにおいてオブジェクトとして存在するイベントであり、イベントをトリガすると、イベントに関するすべての情報、イベントを引き起こす要素、イベントのタイプ、およびその他の特定のイベントに関する情報を含むイベントオブジェクトイベントイベントを発生する.
DOM元素追加イベント
1.DOM元素のイベント属性

2.javascriptスクリプト追加イベント
a.element.onclick=function(e)b.element.addEvent Listener(event、function(e)、useCapture)

適用範囲:現代ブラウザ(IE 9+、Firefox、chorrme、safari、opera)

パラメータ紹介:イベント必須、イベント名.(注:「on」は含みません.例えば「click」、「mouseover」など).functionは、イベントトリガ時に実行する関数を指定しなければなりません.useCaptureオプションで、ブール値は、イベントがキャプチャまたは発泡段階で実行されるかどうかを指定し、デフォルトfalse(発泡)です.

c.element.at tachEvent(イベント、function(e))

適用範囲:IE 6、7、8

パラメータ紹介:イベント必須、文字列、イベント名.(注:「on」を含み、例えば「onclick」、「onmouseover」など).functionは、イベントトリガ時に実行する関数を指定しなければなりません.



  document.getElementById("myBtn").onclick=function(){clickFun()};

  document.getElementById("myBtn").addEventListener("click",function(event){
    clickFun();
   },false);  //         dom    click  

  document.getElementById("myBtn").addEventListener("click",function(event){
     clickFun();
   },true);  //         dom    click  

  document.getElementById("myBtn").attachEvent("click",function(event){
     clickFun();
   });

拡張:オリジナルJavascript書き方、ブラウザを超えてイベントを追加します.

 var EventUtil = {
     //       
      add: function(element, type, callback){
          if(element.addEventListener){
             element.addEventListener(type, callback, false);
          } else if(element.attachEvent){
              element.attachEvent('on' + type, callback);
         } else {
             element['on' + type] = callback;
         }
     }
     //       
    remove: function(element, type, callback){
         if(element.removeEventListener){
             element.removeEventListener(type, callback, false);
         } else if(element.detachEvent){
             element.detachEvent('on' + type, callback);
         } else {
             element['on' + type] = null;
         }
     }
 }

 
 
    var myBtn = document.getElementById("myBtn");
    EventUtil.add(myBtn, 'click', function(){
      console.log('    ');
 });</code></pre> 
 <h2>    、    </h2> 
 <h3>    </h3> 
 <p>    （event capturing）：         dom   ，                    ，       ，                       ，            。</p> 
 <p><span class="img-wrap"></span></p> 
 <h3>    </h3> 
 <p>    （dubbed bubbling）：         ，                 ，     。</p> 
 <p><span class="img-wrap"></span></p> 
 <p><strong> ：             ，           ，      </strong></p> 
 <h3>      /    </h3> 
 <pre><code> event.stopPropagation()   
 event.stopImmediatePropagation()</code></pre> 
 <ul> 
  <li>event.stopPropagation()<br>             document  ,                        </li> 
  <li>event.stopImmediatePropagation() <br>              document,           ,              ,     </li> 
 </ul> 
 <p><strong>    ：          ，          </strong></p> 
 <pre><code><div id="div1">
   <button id="button1">  </button>
</div>

<script type="application/javascript">
    var div1 = document.getElementById("div1");
    var btn = document.getElementById("button1");
    div1.addEventListener("click", function () {
        alert("div1     ");
        event.stopPropagation();
    }, true);
    div1.addEventListener("click", function () {
        alert("div1     ");
    }, true);
    btn.addEventListener("click", function (event) {
        alert("button   ");
    }, true);


//     alert("div1     "); alert("div1     ");


   



    var div1 = document.getElementById("div1");
    var btn = document.getElementById("button1");
    div1.addEventListener("click", function () {
        alert("div1     ");
        event.stopImmediatePropagation();
    }, true);
    div1.addEventListener("click", function () {
        alert("div1     ");
    }, true);
    btn.addEventListener("click", function (event) {
        alert("button   ");
    }, true);


//     alert("div1     ");

イベントエージェント
何がイベント代理ですか?
イベントエージェントは、先祖レベルのDOM要素に一つのイベントを結びつけることであり、サブ孫レベルのDOM要素に触れるイベントでは、イベントバーストの原理を利用して、祖先レベルのDOMに結び付けられたイベントをトリガすることもできる.
これはどういう意味ですか?ネット上の大牛たちは事件の代理はほぼ同じ例を使っていると言います.速達でこの現象を説明します.花を借りて仏陀に献じます.みんなは事件の代理が一体どういう原理なのかよく分かります.3人の同僚が月曜日に宅配を受ける予定です.速達を受け取るために、二つの方法があります.一つは三人で会社の前で速達を待ちます.第二に、フロントにMMの代わりに署名を依頼します.現実的には、私たちは依頼案を採用することが多いです.フロントMMは速達を受け取った後、彼女は受取人が誰かを判断して、受取人の要求によって署名して受け取ります.このような方案はもう一つの利点があります.会社に新入社員が来ても、フロントMMは新入社員宛の宅配便を受け取って確認し、代わりに署名します.
第一に、フロントの同僚に代わって署名することができます.つまり、プログラム中の既存のdomノードにはイベントがあります.第二に、新入社員もフロントMMに代わって署名することができます.つまり、プログラムに新しく追加されたdomノードも事件があります.
なぜ事件代理を使うのですか?
一般的に、domはイベントハンドラが必要です.直接イベントハンドラをセットすればいいです.もし多くのdomがイベントハンドラを追加する必要がありますか?例えば私達は100のliがあって、それぞれのliはすべて同じclickが事件をクリックして、私達はfor循環の方法を使うかもしれなくて、すべてのliを遍歴しにきて、それからそれらに事件を添加して、それではこのようにして何の影響がありますか?
JavaScriptでは、ページに追加されたイベントハンドラの数は、ページ全体の運行性能に直接関係します.domノードとの対話が絶えないため、domにアクセスする回数が多いほど、ブラウザの再描画と再配置の回数が多くなり、ページ全体のインタラクティブ準備時間が延長されます.これはどうして性能最適化の主要な思想の一つはDOM操作を減らす原因です.イベントエージェントを使うなら、すべての操作をjsプログラムに入れて、domとの操作は一回だけ交互にして、domとの対話回数を大幅に減らすことができます.性能を向上させます.
各関数は一つの対象であり、対象がメモリを占用し、対象が多ければ多いほど、メモリの占有率が大きくなり、自然性能が悪くなります.例えば上の100個のliは100個のメモリ空間を占用します.1000個なら、10000個です.(親のレベルが一つしかないなら)このオブジェクトは操作します.そうすると、メモリのスペースが必要です.たくさん節約したほうが自然性能がいいです.
イベントエージェントの実現
事件の代理の方法を紹介する前に、まず一般的な方法の栗を見に行きます.


    111
    222
    333
    444



  window.onload = function(){
     var ulDelegate= document.getElementById("ulDelegate");
     var liDelegate= ulDelegate.getElementsByTagName('li');
     for(var i=0;i<liDelegate.length;i++){
         liDelegate[i].onclick = function(){
             alert('noDelegate');
         }
     }
  }

上のコードはとても簡単で、私達は何回のdom操作があることを見てみて、まずulを探し当てて、それからliを遍歴して、それからliをクリックする時、また一回の目標のliの位置を探して、ようやく最後の操作を実行することができて、毎回クリックしてすべて一回のliを探します.
イベントの代理として実現します.

window.onload = function(){
    var ulDelegate= document.getElementById("ulDelegate");
    ulDelegate.onclick = function(){
         alert('Delegate');
    }
}

ここで父级のulを使って事件の処理をして、liがクリックされる时、泡が立つ原理のため、事件はulの上で泡ができて、ulの上にクリックする事件があるため、事件は触発して、もちろん、ここでulをクリックする时、触発することができるのです.
問題が来ました.イベントエージェントの効果をノードに直接与えるイベント効果と同じにしたいなら、例えばliをクリックするだけで触発されます.この時、Eventオブジェクトは役に立ちます.Eventは属性をtargetといいます.イベントのターゲットノードに戻ります.つまり、targetは現在のイベント操作を表します.のdomは、実際にdomを操作していませんが、これは互換性があります.標準ブラウザはev.target、IEブラウザはevent.srcelementを使っています.この時は現在のノードの位置を取得しただけです.ノード名は分かりません.ここではnodeNameで具体的な署名を取得します.このリターンは大文字になります.小文字にして比較してもいいです.者は回転しない

window.onload = function(){
　　var ulDelegate= document.getElementById("ulDelegate");
　　ulDelegate.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　 alert('Delegate');
　　　　　　alert(target.innerHTML);
　　　　}
　　}
}

このようにliをクリックするだけでイベントが発生し、毎回一回だけdom操作を実行します.liの数が多いと、domの操作が大幅に減少し、最適化された性能が想像できます.
上の栗はli操作は同じ効果だと言っています.li毎にクリックした効果が違ったら、上栗:


      
      
      


    window.onload = function(){
            var ulDelegate= document.getElementById("ulDelegate");
            ulDelegate.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'li'){
                    switch(target.id){
                        case 'add' :
                            alert('  ');
                            break;
                        case 'delete' :
                            alert('  ');
                            break;
                        case 'edit' :
                            alert('  ');
                            break;
                    }
                }
            }
            
        }

最後の事件代理の栗に来てください.li元素が新たに追加された時、同じようにまず普通の書き方を見てみます.


    111
    222
    333
    444




     var ulDelegate= document.getElementById("ulDelegate");
     var liDelegate= ulDelegate.getElementsByTagName('li');
     var addLi = document.getElementById("addLi");
     
     function addClick() {
         for(var i=0;i<liDelegate.length;i++){
             liDelegate[i].onclick = function(){
                alert('noDelegate');
             }
         }
     }
     
     addClick();
     
     addLi.onclick = function(){        
         var addLiElement = document.createElement('li');
         addLiElement .innerHTML = 10000*Math.random();
         ulDelegate.appendChild(addLiElement );
         addClick();
     }

事件代理の書き方をもう一度見てみます.

    window.onload = function(){
        var ulDelegate = document.getElementById("ulDelegate");
        var addLi = document.getElementById("addLi");
        
        ulDelegate.onclick = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert('Delegate');
                alert(target.innerHTML);
            }
        };

        addLi.onclick = function(){
            var addLiElement = document.createElement('li');
            addLiElement .innerHTML = 10000*Math.random();
            ulDelegate.appendChild(addLiElement );
        }

    }

上記はイベントの一例で、新たに追加されたサブ要素はイベントの効果を持っています.要素のサブノードを巡回する必要はありません.親レベルの要素にイベントを追加するだけでいいです.他はすべてjsの中で実行します.そうすると、dom操作を大幅に減らすことができます.これがイベント代理の本質です.
締め括りをつける
イベントは、javascriptとウェブページをリンクする主要な方法であり、イベントを使用する際には、次のようなメモリと性能の問題を考慮する必要があります.

夜歌ページのイベントハンドラの数を制限する必要があります.量が多すぎると大量のメモリが使われ、ユーザーページの反応が鈍くなります.

イベントバブルメカニズムの上に構築された時間依存技術は、時間処理プログラムの数を効果的に減らすことができる

は、ブラウザがページをアンマウントする前に、ページ内のすべてのイベントハンドラ

を削除することを推奨する.
イベントはjavascriptの中で最も重要なテーマの一つであり、イベントの作業メカニズムを深く理解し、それらの性能に対する影響を理解することが重要である.
(まとめはjavascript高級プログラム設計第三版から)

JavaScriptはthisのいくつかの面接問題と紹介について