JQuery6:事件冒泡
#事件冒泡
###什麼是事件冒泡
在一個物件上觸發某類事件(比如單擊onclick事件),如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理(父級物件所有同類事件都將被啟用),或者它到達了物件層次的最頂層,即document物件(有些瀏覽器是window)。
###事件冒泡的作用
事件冒泡允許多個操作被集中處理(把事件處理器新增到一個父級元素上,避免把事件處理器新增到多個子級元素上),它還可以讓你在物件層的不同級別捕獲事件。
###阻止事件冒泡
事件冒泡機制有時候是不需要的,需要阻止掉,通過 event.stopPropagation() 來阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
###阻止預設行為
阻止右鍵選單
$(document).contextmenu(function(event) {
event.preventDefault();
});
###合併阻止操作
實際開發中,一般把阻止冒泡和阻止預設行為合併起來寫,合併寫法可以用
// event.stopPropagation();
// event.preventDefault();
// 合併寫法:
return false;
學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928
清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
相關文章
- JavaScript 事件冒泡JavaScript事件
- 事件的冒泡事件
- jQuery 事件冒泡jQuery事件
- 事件冒泡 和 事件捕獲事件
- JavaScript阻止事件冒泡JavaScript事件
- jquery阻止事件冒泡jQuery事件
- jquery的冒泡事件jQuery事件
- JS事件(事件冒泡和事件捕獲)JS事件
- stopPropagation() 阻止事件冒泡事件
- jQuery如何阻止事件冒泡jQuery事件
- js 事件冒泡 事件代理 事件捕捉 this指標 bind thisJS事件指標
- 原生js如何阻止事件冒泡JS事件
- javascript阻止事件冒泡程式碼JavaScript事件
- return false影響事件冒泡False事件
- 什麼是jquery事件冒泡jQuery事件
- zepto繫結事件改變冒泡事件流事件
- 關於js事件冒泡和事件捕獲JS事件
- javascript事件冒泡和事件捕獲型別JavaScript事件型別
- 理解js的事件冒泡和事件捕獲JS事件
- JavaScript事件冒泡、事件捕獲和阻止預設事件JavaScript事件
- 事件的捕獲、冒泡、委託事件
- javascript事件冒泡簡單例項JavaScript事件單例
- jQuery事件冒泡程式碼例項jQuery事件
- js 事件的冒泡和委託JS事件
- JS中的事件順序(事件捕獲與冒泡)JS事件
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- 梳理下常見的不冒泡事件事件
- Javascript中的事件冒泡與捕獲JavaScript事件
- JavaScript事件捕獲冒泡與捕獲JavaScript事件
- js阻止事件冒泡例項程式碼JS事件
- jQuery阻止事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡簡單介紹jQuery事件
- 阻止jquery事件冒泡程式碼例項jQuery事件
- javascript基礎(事件的冒泡)(三十二)JavaScript事件
- jQuery阻止事件冒泡例項程式碼jQuery事件
- JavaScript高階程式設計筆記 事件冒泡和事件捕獲JavaScript程式設計筆記事件
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- vue的事件冒泡 最詳細解釋版本Vue事件