1. 事件流（事件傳播）
描述的是從頁面接收事件的順序，
IE事件流是事件冒泡流，NetScape是事件捕獲流，
window: window
document: document
html: document.documentElement
body: document.body
div: document.getElementByID('div')
2. 事件流階段
（1）事件捕獲階段 （2）處于目標階段 （3）事件捕獲階段
3. 事件物件
3.1 e.eventPhase 描述事件發生的階段
事件捕獲階段 1
處于目標階段 2
事件冒泡階段 3
3.2 事件目標
e.currentTarget === this
e.target
e.srcElement
// 兼容性代碼
var target = e.target || e.srcElement;
3.3 事件代理（事件委托）
原理：事件冒泡
3.4 取消默認行為（a鏈接的跳轉行為）
e.preventDefault()
e.returnValue = https://www.cnblogs.com/buildnewhomeland/p/false;
return false; （通用）
3.5 事件冒泡
e.bubbles（blur、focus、scroll事件回傳值為false）
e.stopPropagation(); // 常用
e.stopImmediatePropagation();
如果有多個相同型別事件的事件監聽函式系結到同一個元素，當該型別的事件觸發時，它們會按照被添加的順序執行，如果其中某個監聽函式執行了 event.stopImmediatePropagation() 方法，則當前元素剩下的監聽函式將不會被執行，
e.cancelBubble = true;
// 兼容寫法
var handler = function(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation();
}else {
e.cancelBubble = true;
}
}
4. 事件處理程式
4.1 HTML事件處理程式
4.2 DOM0級事件處理程式
btn.onclick = function(e) {
e = e || window.event;
console.log(btn.innerHTML = 1);
}
// 會出現事件覆寫現象
btn.onclick = function(e) {
e = e || window.event;
console.log(btn.innerHTML = 2);
}
btn.onclick = null;
4.3 DOM2級事件處理程式
btn.addEventListener('click', function() {}, false);
btn.addEventListener('click', function() {}, false);
var handler = function(){
...
}
btn.addEventListener('click', handler, false);
btn.removeEventListener('click', handler);
4.4 IE事件處理程式
btn.attachEvent('click', function(){
// 在ie中的this指向全域的window
})
btn.detachEvent('click', function(){
...
})
處理this指向的辦法，用call(target)
5. 事件物件中的屬性 坐標位置
5.1 e.clientX/Y x/y
相對于當前的瀏覽器（客戶端視窗有效區域）的x軸、y軸的距離，（與滾動條無關）
5.2 e.screenX/Y
相對于電腦螢屏的x軸、y軸的距離，
5.3 e.pageX/Y
相對于整個頁面檔案的x軸、y軸的距離，（與滾動條有關）
5.4 e.offsetX/Y
相對于當前事件源的x軸、y軸的距離，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/117320.html
標籤：JavaScript
上一篇：WebSocket學習總結