JAvascriptイベントの依頼理解、jQuery.on()メソッドは一歩一歩イベント依頼を実現する

10520 ワード
javascript
この文章は参考にします:ブログ園の文章、自分のために事件の委託の方面の知識だけを強固にします
概要:
イベント依頼とは?彼にはもう1つの名前がイベントエージェントと呼ばれています(タイムエージェント==イベント依頼、今になってやっとこの2つが同じ意味であることがわかりました)
高距離3では,イベント依頼はイベントバブルを利用して1つのイベントハンドラのみを指定することで,あるタイプのすべてのイベントを管理することができる.
他の大牛の一例を参考にして、自分のためにもっとよく理解してください:宅配便の例を受け取ります
3人の同僚が月曜日に宅配便を受け取る予定です.宅配便を受け取るには、3人で会社の前で宅配便を待つ方法があります.二つ目はフロントMMに代わってサインを依頼することです.現実には、私たちはほとんど依頼案を採用しています(会社もそんなに多くの従業員が入り口に立って宅配便を待つことを容認しません).フロントMMは宅配便を受け取った後、受信者が誰なのかを判断し、受信者の要求に従って署名し、支払いを代行する.この案にはもう一つの利点があります.それは、会社に新入社員が来ても(いくら)、フロントMMは新入社員に送る宅配便を受け取って確認し、代わりに署名することです.
2つの意味:
1.現在、フロントに依頼している同僚は署名することができます.すなわち、プログラム内の既存のdomノードはイベントがあります.
2.新入社員もフロントmmに代わって署名することができ、すなわちプログラムに新しく追加されたdomノードにもイベントがある.
なぜ事件依頼で??イベント依頼のメリットは何ですか??
一般的にdomはイベントハンドラが必要ですが、私たちは直接彼にイベントハンドラを与えればいいのですが、多くのdom要素がイベントハンドラを追加する必要がある場合は??
例えば100個のli、各liには同じclickクリックイベントがあり、forループの方法ですべてのliを巡り、各liにバインドイベントを追加することができます.
これは間違いなく性能に大きな影響を及ぼしています.
jsでは、ページに追加されたイベントハンドラの数は、domノードとのインタラクションが絶えず必要になるため、domにアクセスする回数が多ければ多いほど、ブラウザの再描画と再配置を引き起こす回数が多くなり、ページ全体のインタラクション準備時間が長くなります.
これが性能の最適化でdom操作を減らす原因です.
イベント依頼を採用すると、すべての操作をjsプログラムに入れ、domとの操作は一度だけインタラクティブになり、domのインタラクティブ回数を減らすことで、性能が向上します.
イベント依頼の原理:
イベント依頼はイベントバブル原理で実現!
イベントバブル:イベントが最も深いノードから始まり、イベントが徐々に上に伝播することです.
例:ページにノードツリーがあり、div>ul>li>a
例えば一番奥のaにclickイベントを加えると、イベントは次々と外へ実行され、実行順序はa>li>ul>divで、最外層のdivにクリックイベントを追加すると、中のul,li,aがクリックイベントをすると、最外層のdivに泡が立つので、トリガーされます.これがイベント依頼です.親に代わって実行イベントを依頼します.
業務需要:機能を実現し、tdをクリックし、セルが変色する.
html構造

	

		

			1
			2
			3
		

	
window.onload = function(){
    var oTa = document.getElementById("myTable");
    var aTd = oTa.getElementsByTagName('td');
    for(var i=0;i
上の方法は最も简単な方法で、最も愚かな方法で、私达は何回dom操作を実行したことを见て、まずtableを探し当ててそれからtdを遍歴して、tdをクリックする时、また1回の目标のliの位置を探して、やっと最后の操作を実行することができて、毎回クリックしてすべて1回tdを探します
では
イベント依頼の仕方はどう書きますか?
window.onload = function(){
    var oTa= document.getElementById("myTable");
    oTa.onclick = function(){         //   table、td   alert(123)
       alert(123);  
    }}
， td ， table ， table ， ;
table ；
td table ， ？？？

Event target， ， ， ，target dom， dom，
： ：event.target，IE ：event.srcElement，
， ， nodeName ， ， ； 
window.onload = function(){
　　var oTa = document.getElementById("myTable");
　　oTa.onclick = function(e){
　　　　var e = e || window.event;                    //     
　　　　var target = e.target || e.srcElement;　　　
　　　　target.nodeName.toLowerCase() == 'td' ? alert('    table') ：(target.style.background = 'red');  //         
　　}
}
， td ， dom ， td ， dom ；
td ， td ， ，？？？ 

	

		

			  
			  
			  
			  
		

	
window.onload = function(){
            var Add = document.getElementById("add");
            var Delete = document.getElementById("delete");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert('  ');
            };
            Remove.onclick = function(){
                alert('  ');
            };
            Move.onclick = function(){
                alert('  ');
            };
            Select.onclick = function(){
                alert('  ');
            }
            
        }
4 ， ，，， 4 dom ；
， ？ 

window.onload = function(){
            var myTable = document.getElementById("myTable");
            myTable.onclick = function (ev) {   
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'table'){
                    switch(target.id){
                        case 'add' :
                            alert('  ');
                            break;
                        case 'remove' :
                            alert('  ');
                            break;
                        case 'move' :
                            alert('  ');
                            break;
                        case 'select' :
                            alert('  ');
                            break;
                    }
                }
            }
            
        }
， dom ， ， ；

document dom ；
， ？？？ ， ， ？？？？
： 

    
    
        
  • 111
    • 
        
  • 222
    • 
        
  • 333
    • 
        
  • 444
    •
， li ， li ！！！
：
， for ， ， ， ， dom ，
？？？ 

	window.onload = function(){
		var ul1 = document.getElementById('ul1');
		var li = document.getElementsByTagName('li');
		var btn = document.getElementById('btn');
		var num = 1;
		// for(var i=0;i<li.length;i++){
		// 	li[i].onclick = function(){
		// 		alert(this.innerHTML);
		// 	}
		// 	num++;
		// }
		ul1.onclick = function(e){
			var e = e || window.event;
			var target = e.target || event.srcElement;
			console.log(target.nodeName);
			target.nodeName.toLowerCase() == 'li' ? alert(target.innerHTML) : alert("    ul  ");
		}

		btn.onclick = function(){
			var oLi = document.createElement('li');
			oLi.innerHTML = 111*num;
			ul1.appendChild(oLi);
		}
	}</code></pre>           ， 
   <span style="font-size:14px;"><strong>   </strong></span>            ； 
  </div> 
  <div>
          ，         ，             ，               ， 
  </div> 
  <div>
            js     ，        dom  ， 
  </div> 
  <div>
                  ； 
  </div> 
  <div> 
   <br> 
  </div> 
  <div> 
   <span style="font-size:24px;"><strong>jQuery    ：</strong></span> 
  </div> 
  <div> 
   <span style="font-size:14px;">    code ，jquery         ，  on   ！！！</span> 
  </div> 
  <div> 
   <span style="font-size:14px;"></span> 
   <pre><code class="language-html"><!--      -->
	<table id="myTable" border="1">
		<tr>
			<td>111</td>
			<td>222</td>
			<td>333</td>
			<td>444</td>
		</tr>
	</table></code></pre> 
   <pre><code class="language-javascript"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">

	$(function(){		
		$("#myTable td").click(function(){  
			$(this).html();  //    ，   100 td  ，    100   ，      
		})
		

		
		$("#myTable").click(function(e){    //             ？？？？
			console.log(e.target);
			var $clicked = $(e.target);    //e.target         
			console.log(e.target.nodeName);  //     ， toLowerCase()       
			e.target.nodeName.toLowerCase() == 'table' ? alert('   table ')  : $clicked.html();  //          
		})
		

		// jQuery1.7 on    ,      bind、live   ，            
		// $(selector).on(event,childSelector,data,function,map)   on     
		// $(selector).on(event,childSelector,function(){})        on    ，          ，    ，    
		$("#myTable").on('click','td',function(){
			$(this).html();
		})
	})
：
：1. dom ， dom ， ；
                            2. ， ；
                            3。。。。。。 ，

：
            ：click 、mousedown、mouseup、keydown 、keyup、keypress
        ：mouseover mouseout ， ， ， ，
                      focus、blur ， ；

！！！！
pythonリスト内の各値を複数の変数にすばやく割り当てる
ドメイン間の相関