js事件流、事件委托與事件階段實例詳解
前言
JavaScript 與 HTML 的交互是通過事件實現(xiàn)的，事件代表文檔或瀏覽器窗口中某個有意義的時刻?？梢允褂脙H在事件發(fā)生時執(zhí)行的監(jiān)聽器（也叫處理程序）訂閱事件。本文總結一下 JS 中的事件相關知識點。
1、事件流
HTML 中與 javascript 交互是通過事件驅(qū)動來實現(xiàn)的，例如鼠標點擊事件 onclick、頁面的滾動事件 onscroll 等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什么時候進行調(diào)用的，就需要了解一下“事件流”的概念。
事件流描述的是從頁面中接收事件的順序,DOM2 級事件流包括下面幾個階段。事件捕獲階段、處于目標階段、事件冒泡階段
（1）事件捕獲的意思是最不具體的節(jié)點應該最先收到事件，而最具體的節(jié)點應該最后收到事件。比如點擊頁面的一個div觸發(fā)的元素順序分別是document、html、body、div?？梢栽谠撾A段攔截事件發(fā)生
（2）處于目標階段即捕獲到實際的目標元素階段，
（3）冒泡階段事件方向傳播，從div目標元素傳播至document元素
2、事件處理程序
事件處理程序指為響應點擊，加載，鼠標等操作而調(diào)用的函數(shù)。有很多方式指定事件處理程序。
a、通過html元素屬性指定事件處理程序
<input type="button" value="點我" onclick="console.log('我被點擊了')">
b、DOM0 事件處理程序，通過js獲取操作對象元素，并指定事件處理程序
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn")
btn.onclick = function () {
console.log("我被點擊了");
}
</script>c、DOM2 事件處理程序
addEventListener 和 removeEventListener() 是 DOM2 級事件新增的指定事件處理程序的操作，addEventListener方法都接收 3 個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是 false，表示在冒泡階段調(diào)用事件處理程序。IE 只支持事件冒泡。通過 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 并傳入與添加時同樣的參數(shù)來移除。
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", function () {
console.log("我被點擊了");
},false)
</script>d、IE 事件處理程序
IE 實現(xiàn)了與 DOM 類似的方法，即 attachEvent() 和 detachEvent() 。這兩個方法接收兩個同樣的參數(shù)：事件處理程序的名字和事件處理函數(shù)。
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn");
btn.attachEvent("onclick", function () {
console.log("我被點擊了");
});
</script>在 IE中使用 attachEvent() 與使用 DOM0方式的主要區(qū)別是事件處理程序的作用域。使用 DOM0方式時，事件處理程序中的 this 值等于目標元素。而使用 attachEvent() 時,事件處理程序是在全局作用域中運行的，因此 this 等window。
使用 attachEvent() 添加的事件處理程序?qū)⑹褂?detachEvent() 來移除，只要提供相同的參數(shù)。
3、事件對象
a、DOM事件對象event
在 DOM 合規(guī)的瀏覽器中， event 對象是傳給事件處理程序的唯一參數(shù)。
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", function (event) {
console.log(event);
}, false)
</script>打印如下：
b、IE 事件對象
與 DOM 事件對象不同， IE 事件對象可以基于事件處理程序被指定的方式以不同方式來訪問。
如果通過DOM方式添加事件處理程序，則event 對象只是 window 對象的一個屬性
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", function () {
let event = window.event;
console.log(event);
}, false)
</script>如果通過IE事件處理程序，則 event對象會作為唯一的參數(shù)傳給處理函數(shù)
<button id="btn">點我</button>
<script>
var btn = document.getElementById("btn")
btn.attachEvent("click", function (event) {
console.log(event);
}, false)
</script>4、跨瀏覽器事件處理
// 包含兼容性處理的事件處理函數(shù)
const eventUtils={
//添加事件
addEvent:function(element,type,handler){
if (elment.addEventListener) {
element.addEventListener(type,handler,false)
} else if(elment.attachEvent){
element.attachEvent("on"+type,handler)
}else{
elment["on"+type]=handler
}
},
//移除事件
removeEvent:function(element,type,handler){
if(elment.removeEventListener){
element.removeEventListener(type,handler,false)
}else if(element.datachEvent){
element.datachEvent("on"+type,handler)
}else{
element["on"+type]=null
}
},
//獲取事件目標元素
getTarget:function(event){
return event.target||event.srcElement
},
//獲取event對象的引用，取到事件的所有信息，確保隨時使用event
getEvent:function(event){
return event||window.event
},
//阻止事件（主要是事件冒泡，因為ie不支持事件捕獲）
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble=true
}
},
//取消事件的默認行為（主要ie事件對象設置returnValue為false可以取消事件默認行為）
preventDefault:function(event){
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue=false
}
}
}5、事件委托
簡介：事件委托指的是，不在事件的發(fā)生地（直接 dom）上設置監(jiān)聽函數(shù)，而是在其父元素上設置監(jiān)聽函數(shù)，通過事件冒泡，父元素可以監(jiān)聽到子元素上事件的觸發(fā)，通過判斷事件發(fā)生元素 DOM 的類型，來做出不同的響應。
舉例：最經(jīng)典的就是 ul 和 li 標簽的事件監(jiān)聽，比如我們在添加事件時候，采用事件委托機制，不會在 li 標簽上直接添加，而是在ul 父元素上添加。因為所有的li標簽都是ul標簽的后代，在li標簽上觸發(fā)事件時，會進行事件冒泡，必定在ul標簽上接收到觸發(fā)事件處理程序，通過事件對象可以判斷具體是哪個li標簽觸發(fā)的，這樣就省去了重復獲取元素的代碼。
好處：比較合適動態(tài)元素的綁定，新添加的子元素也會有監(jiān)聽函數(shù)，也可以有事件觸發(fā)機制。減少整個頁面所需的內(nèi)存，提升整體性能
事件委托的實現(xiàn)
我們可以給HTMLElement對象綁定該方法delegate
HTMLElement.prototype.delegate = function(type,selector,fn){
this.addEventListener(type,function(e){
var target = e.target,
bubble = true;
while(bubble && target !== this){
if (filter(this,selector,target)) {
bubble = fn.call(target,e);
}
target = target.parentNode;
return bubble;
}
});
function filter(agent,selector,target){
var nodes = agent.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i] == target) return true;
}
return false;
}
}
document.body.delegate('click','.parentNode li',function(e){
console.log(e.target);
});
實際情況下，有些事件 blur，change，focus 等事件，是不支持事件冒泡的。這里并沒有做判斷。
總結
到此這篇關于js事件流、事件委托與事件階段的文章就介紹到這了,更多相關js事件流、事件委托與事件階段內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
表單問題，是個糾結的問題，有時候程序又要前端去處理，那要看你的后臺搭檔怎么樣了，接下來一起探討表單驗證吧2013-03-03
微信小程序webview實現(xiàn)長按點擊識別二維碼功能示例
這篇文章主要介紹了微信小程序webview實現(xiàn)長按點擊識別二維碼功能,結合實例形式分析了webview二維碼識別相關操作技巧,需要的朋友可以參考下2019-01-01
程序中很多數(shù)據(jù)是動態(tài)拼接而成的json數(shù)據(jù)，最近在用json的時候老是現(xiàn)JSON.parse錯誤2010-07-07
這篇文章主要為大家詳細介紹了用JavaScript實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了懸浮廣告方法日常收集整理的相關資料,需要的朋友可以參考下2016-03-03
很好用的js日歷算法詳細代碼，包括公歷與農(nóng)歷的一些所需要的功能實現(xiàn)，需要的朋友可以參考一下2013-03-03
ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)
這篇文章主要介紹了ES6中的class是如何實現(xiàn)的？(附Babel編譯的ES5代碼詳解)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
教你JavaScript利用charAt()統(tǒng)計出現(xiàn)次數(shù)最多的字符和次數(shù)
這篇文章主要介紹了JavaScript利用charAt()統(tǒng)計出現(xiàn)次數(shù)最多的字符和次數(shù)的操作方法，本文以判斷一個字符串'aabcdobdackoppz'中出現(xiàn)次數(shù)最多的字符，并統(tǒng)計其次數(shù)為例，通過實例代碼給大家詳細介紹，需要的朋友參考下吧2021-08-08
今天小編就為大家分享一篇layer.confirm取消按鈕綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了javascript實現(xiàn)全角半角檢測的方法,涉及javascript針對字符遍歷與檢測的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07