網(wǎng)站開發(fā)語言哪一種好些技能培訓網(wǎng)
一、基本概念:DOM事件的級別
// DOM0
element.onclick=function(){}
// DOM2, 新增了冒泡和捕獲
element.addEventListener('click',function(){}, false)
// DOM3, 新增更多事件類型 鼠標、鍵盤等
element.addEventListener('keyup',function(){}, false)
二、DOM事件模型
捕獲和冒泡
三、DOM事件流
事件流:瀏覽器再頁面做交互的過程中,比如點擊鼠標左鍵,這個左鍵如何傳遞到頁面上,就是事件流
完整事件流: 捕獲 → 目標階段 → 冒泡
四、描述DOM事件捕獲的具體流程
- 事件捕獲:是從上到下的過程
- 第一個接收事件的對象是window
- 具體流程: window → document → html → body → … (按照html結構往下傳遞) → 目標元素
<!-- 模擬DOM時間的捕獲的具體流程 --><div id="eve"><style>#eve {width: 100px;height: 100px;background-color: aqua;text-align: center;line-height: 100px;font-size: 20px;}</style>目標元素</div><script type="text/javascript">var ev = document.getElementById('eve');ev.addEventListener('click', function() {console.log('目標元素');}, true);document.body.addEventListener('click', function() {console.log('body');}, true);document.addEventListener('click', function() {console.log('document');}, true);window.addEventListener('click', function() {console.log('window');}, true);document.documentElement.addEventListener('click', function() {console.log('html');}, true);</script>
- 如何使用js獲取html節(jié)點:document.documentElement
五、Event對象的常見應用
- event.preventDefaylt() 阻止默認事件
場景描述:比如有一個需求,再點擊a標簽時,做一些js邏輯,需要阻止a標簽的跳轉行為 - event.stopPropagation() 阻止事件冒泡
場景描述:父元素綁定事件A和子元素綁定事件B,我希望點擊子元素時,只觸發(fā)事件B, 不需要往上冒泡觸發(fā)父元素的事件A - event.stoplmmediatePropagation() 阻止事件冒泡 + 阻止相同事件監(jiān)聽被調用
場景描述:假設一個元素同時綁定兩個click事件,再第一次執(zhí)行click事件時,執(zhí)行stoplmmediatePropagation,阻止冒泡的同時也阻止了第二個click時間
div.addEventListener("click" , function(){alert("第一次執(zhí)行");stopImmediatePropagation();
} , true);
?
div.addEventListener("click" , function(){alert("第二次執(zhí)行");
} , true);
?
// 點擊div,第二次執(zhí)行不會觸發(fā)
-
event.currentTarget 獲取綁定事件的DOM對象
場景描述:給ul綁定事件,event.currentTarget 獲取ul的dom對象 -
event.target 獲取實際觸發(fā)事件的DOM對象
場景描述:給多個li標簽綁定click事件,一般情況下會循環(huán)li節(jié)點,給每一個li綁定事件。這種情況會消耗大量的性能,可以通過事件委托的方式,把所有l(wèi)i事件綁定到一個ul上,通過event.target獲取具體是哪一個li被點擊
六、自定義事件(模擬事件)
- Event 自定義事件
var eve = new Event('custome'); // 聲明一個自定義事件對象
var dom = document.getElementById("dom");
// 給dom節(jié)點綁定自定義事件
dom.addEventListener('custome',function(){console.log('custome')
})
// 觸發(fā)自定義事件
dom.dispatchEvent(eve)
// custome
- CustomEvent 自定義事件,可待參數(shù)
var eve = new CustomEvent('custome', {detail: {name: '張三', phone: '13751032412'}}); // 聲明一個自定義事件對象, 允許加參數(shù)
var dom = document.getElementById("dom");
// 給dom節(jié)點綁定自定義事件
dom.addEventListener('custome',function(e){console.log('參數(shù)', e.detail)
})
// 觸發(fā)自定義事件
dom.dispatchEvent(eve)
// 參數(shù) {name: '張三', phone: '13751032412'}