在jQuery中,on()方法是綁定事件處理程序的常用方法之一。通過on()方法,我們可以為某些事件綁定一個或多個處理程序,這些處理程序可以在事件被觸發時被執行。
on()方法的常用參數格式為:on(events, selector, data, handler),下面來一一介紹各個參數:
events:要綁定的一個或多個事件名稱,多個事件名可以用空格隔開,例如 'click keyup'; selector:一個可選的字符串,用于過濾出在父元素上的匹配子元素,可以是具體的元素名或者選擇器表達式; data:一個可選的對象,它會被傳遞給處理程序函數作為event.data屬性; handler:事件觸發時執行的處理程序函數。
當我們只需要綁定一個事件處理程序時,可以簡化為on(events, handler)的形式,例如:
$( "#myBtn" ).on( "click", function() { alert( "Button clicked." ); });
當我們需要給多個元素綁定同一個事件處理程序時,可以使用selector參數來實現。例如:
$( "#myList" ).on( "click", "li", function() { alert( $( this ).text() ); });
此時,li元素上的點擊事件只會觸發一次處理程序,即使添加了新的元素,也可以受到相同的處理程序影響。
最后值得注意的是,on()方法的handler參數可以被簡化為一個包含事件處理函數的對象,例如:
$( "#myList" ).on({ click: function() { console.log( "clicked!" ); }, mouseenter: function() { console.log( "hovered!" ); } });
通過這種方式,可以一次性地綁定多個事件處理函數,讓代碼更加簡潔。
下一篇css怎樣將圖片置頂