jQuery delegate()の使い方

delegate()適用シーン:jsが要素を動的に追加した後に追加する必要がある要素バインドイベントを、将来の要素にイベントを追加すると呼びます.指定した要素の1つ以上のイベントにイベント処理関数をバインドすることもできますが、個人的には将来の要素のイベントバインドを解決するのに最適だと思いますので、以下ではイベントをデフォルトでバインドするのは未来の要素です.注意:jqバージョン1.4.2の使い方は1.4.3とは異なり、まず1.4.2を紹介します.jQueryObject.delegate(selector,events,data,hanlder)パラメータ説明:jQueryObject:親エレメントは、将来のイベントエレメントをバインドする祖先エレメントでなければなりません.直接親エレメントではなくても、祖先エレメントでなければなりません(jqセレクタをサポートします).selector:イベントをバインドする必要がある将来の要素(jqセレクタをサポート).events:イベントバインド、ここでsを加えた単語を使用することに注意してください.これは、複数のイベントを追加し、スペースで区切ることができることを意味します.たとえば、「click mouseenter mouseleave」などです.data:オプションのパラメータで、イベント関数をトリガーするときにイベント関数に渡すことができます.hanlder:イベント処理関数、よく使われるいくつかの場所

event.type:イベントタイプを返します.

event.data:パラメータに入力されたdata値を返します.

$(this):イベントをトリガーするオブジェクトを指します.

セグメントコード:

	
		
		
		
	
	
		


		
		
			setTimeout(function(){
				var li = document.createElement('li');
				var div = document.createElement('div');
				li.className = "myli";
				div.className = "mydiv";
				li.appendChild(div);
				document.getElementById('myul').appendChild(li)
			},200)//             
			$('.myli').on('click',function(){
				alert(1)
			})//    
			$('.myul').delegate('.myli div','click mouseenter mouseleave','nihao',function(e){
			 	if(e.type == 'mouseenter'){
			 		console.log('I am mouseenter function')
			 	}else if(e.type == 'mouseleave'){
			 		console.log('I am mouseleave function')
				}else if(e.type == 'click'){
					console.log($(this))
					console.log(e.data)
				}
			})		
		
	

次に1.4.3でサポートされているeventsMapの使い方を紹介します.アップグレード版jQueryObjectに似ています.delegate( selector , eventsMap, data)

var events = {
	'mouseenter': function(e){//  ，   e  ，     
		console.log('I am mouseenter function')
	},
	'mouseleave': function(e){
		console.log('I am mouseleave function')
	},
	'click': function(e){
		console.log($(this))
 		console.log(e.data)
	}
}
$('.myul').delegate('.myli div',events,'hahah');

もちろんjsonオブジェクトをdelegateに入れて、提出しないこともできます.これらでしょう.アップグレード版のよりハイエンドは、複数のイベントを判断するプロセスを簡素化し、コードをより規範的に見せるのに役立ち、使いやすいです.