Jquery動態綁定事件處理函數 bind / on / delegate
阿新 • • 發佈:2017-11-20
後來 nbsp spa 插入 我們 ready dom his png
1、bind方法綁定的事件處理函數不會應用到後來添加到DOM中的新元素。比如你在用bind給頁面元素綁定事件之後,又新添加了一些與之前綁定過事件的元素一樣的DOM元素,但是這些事件並不能在新的DOM元素上有體現。
如:
$(document).ready(function(){ $("img").bind({ mouseenter:function(){ $(this).css("border","thick solid red"); }, mouseout:function(){ $(this).css("border","thick solid green"); } }); $("#row").append("<img src=‘./idiot.png‘/>"); });
此時新插入的img並沒有綁定事件。
2、on方法綁定事件,並非直接把事件處理函數綁定到目標元素上。實際上它是在document對象上綁定了一個事件處理函數,該函數在觸發時檢查觸發事件的元素是否匹配選擇器。一旦事件與元素匹配成功,就調用綁定的事件處理函數。實際上,on方法是努力的把事件處理函數綁定要新的元素上。
$(document).ready(function(){ $(document).on({ mouseenter:function(){ $(this).css("border","thick solid red"); }, mouseout:function(){ $(this).css("border","thick solid green"); } },"img");
$("#row").append("<img src=‘./idiot.png‘/>");
});
但是,on方法綁定事件處理函數可能會有一個問題,在處理函數執行之前,我們需要等事件傳播到document元素,與on方法相比delegate更直接、高效一些。
3、delegate方法綁定事件,允許我們在頁面上指定任意一個元素作為監聽事件的元素,只綁定一個事件處理函數,綁定速度相對於bind和on算更快的。
$(document).ready(function(){ $("#row").delegate("img",{
mouseenter:function(){
$(this).css("border","thick solid red");
},
mouseout:function(){
$(this).css("border","thick solid green");
}
},);
$("#row").append("<img src=‘./idiot.png‘/>");
});
Jquery動態綁定事件處理函數 bind / on / delegate