jquery中的on()方法是用來綁定事件的。它的語法如下:
$(selector).on(event,childSelector,data,function)其中,event是要綁定的事件類型,如click、mouseover等;
childSelector是子元素的選擇器,可選;
data是要傳遞給事件處理函數(shù)的數(shù)據(jù),可選;
function是事件處理函數(shù)。
在on()方法中,event參數(shù)是最為重要的。event參數(shù)有許多不同的取值,下面列舉一些常用的值:
//單擊事件 $(selector).on("click", function() { //事件處理代碼 }); //雙擊事件 $(selector).on("dblclick", function() { //事件處理代碼 }); //鼠標(biāo)移入事件 $(selector).on("mouseenter", function() { //事件處理代碼 }); //鼠標(biāo)移出事件 $(selector).on("mouseleave", function() { //事件處理代碼 }); //文本框失去焦點(diǎn)事件 $(selector).on("blur", function() { //事件處理代碼 }); //文本框獲得焦點(diǎn)事件 $(selector).on("focus", function() { //事件處理代碼 }); //鍵盤按下事件 $(selector).on("keydown", function() { //事件處理代碼 }); //鍵盤松開事件 $(selector).on("keyup", function() { //事件處理代碼 });
在on()方法中,event參數(shù)還可以使用動態(tài)事件。下面是一個(gè)例子:
$(document).on("click", "button", function(){ //事件處理代碼 });這里將click事件綁定到document元素上。因?yàn)樗性囟际莇ocument元素的后代,所以任何一個(gè)button元素上的點(diǎn)擊事件都會觸發(fā)這個(gè)事件處理函數(shù)。
在on()方法中,event參數(shù)還可以使用命名空間。下面是一個(gè)例子:
$(selector).on("click.myEvent", function(){ //事件處理代碼 });這里將click事件綁定到selector元素上,并給事件命名一個(gè)命名空間myEvent。這樣就可以在以后的代碼中使用這個(gè)命名空間來刪除或執(zhí)行這個(gè)事件。
總之,在jquery中,on()方法是一個(gè)強(qiáng)大的事件處理工具,可以在指定元素上綁定任意類型的事件。對于開發(fā)人員來說,要熟練掌握on()方法的語法和使用方法,才能更好地實(shí)現(xiàn)自己的需求。