jQuery中的事件冒泡稱為“bubbling”,這是指事件從最內層的元素開始,逐步向外層元素傳遞。該過程通常會被瀏覽器所截獲,并執(zhí)行默認的操作,例如表單的提交或鏈接的跳轉。
為了防止事件的默認行為發(fā)生,我們可以使用jQuery的event對象的方法preventDefault()進行阻止。此外,事件冒泡也允許我們使用jQuery的多個選擇器,以便處理同一事件的多個目標。
//以下是一個jQuery事件傳播的例子: HTML: <div id="outer"> <div id="inner"> <a href="#" id="test">點擊我!</a> </div> </div> jQuery: $('#outer').click(function() { alert('outer clicked'); }); $('#inner').click(function() { alert('inner clicked'); }); $('#test').click(function() { alert('test clicked'); });
當我們點擊鏈接時,會先觸發(fā)最內層元素的事件處理程序,然后逐級向外層傳遞,分別觸發(fā)中間和外層元素的事件處理程序。因此,上述代碼將依次彈出“test clicked”、“inner clicked”和“outer clicked”這三個提示框。
如果我們在處理程序中使用event.stopPropagation()方法來阻止事件冒泡,那么只有最內層元素的事件處理程序會被觸發(fā),而不會觸發(fā)任何外層元素事件處理程序。
//以下是使用event.stopPropagation()方法的示例: $('#test').click(function(event) { event.stopPropagation(); alert('test clicked'); });
最后需要注意的是,除非必要,否則應該避免在父級元素中直接定義太多的事件處理程序,因為這可能會影響頁面性能。相反,應該盡可能地減少事件處理程序的數量,或者將它們轉移到子級元素上。