在一般的jQuery事件綁定中,有兩種方法可以綁定事件,一種是使用簡單的事件綁定,另一種是使用on方法。而當需要對多個元素進行事件綁定的時候,on方法就會變得更為實用。
使用on方法可以很方便地對多個元素進行事件綁定,同時還可以通過選擇器來指定需要綁定事件的元素。下面是一個示例,它會在點擊class名為“btn”的所有元素后彈出一個窗口:
$(document).on('click', '.btn', function(){
alert('按鈕被點擊了!');
});
如果是使用簡單的事件綁定,需要對每一個元素都進行事件綁定,這樣會冗余且代碼量很大。而使用on方法,只需要一個綁定即可實現對多個元素的事件綁定。
除了可以對多個元素進行事件綁定之外,on方法還可以輕松地進行事件的委托。委托事件指的是將事件綁定到它們的父元素(或更高級別的元素),而不是直接綁定到目標元素上。
對于異步加載的元素,使用委托事件更為實用。比如,當內容通過Ajax加載進來時,使用on方法可以在內容加載完畢后自動綁定事件。下面是一個示例,它會在點擊id為“content”的父元素中的任何鏈接后彈出一個窗口:
$('#content').on('click', 'a', function(){
alert('鏈接被點擊了!');
});
在這個示例中,鏈接沒有被直接綁定事件,而是通過父元素“#content”來監聽事件,當鏈接被點擊時,事件會冒泡至“#content”元素,并觸發綁定的事件。
上一篇段之間的距離css
下一篇jquery on回車