本篇內(nèi)容主要講解“js中的事件對象、事件源對象和事件流實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“js中的事件對象、事件源對象和事件流實例分析”吧!

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括華陰網(wǎng)站建設(shè)、華陰網(wǎng)站制作、華陰網(wǎng)頁制作以及華陰網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，華陰網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到華陰省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

js中事件對象、事件源對象、事件流分析理解

事件對象（event）

• 什么是事件：事件就是指js中所有可以發(fā)生的有并且有監(jiān)聽的事件，比如：(鼠標(biāo)、鍵盤以及瀏覽器窗口變化等）

• 是什么是事件對象（event）：通俗講就是一個記錄了事件各種信息的一個對象。
  這里需要注意的是：事件對象會有兼容性問題，在除IE的瀏覽器中為event，而非瀏覽器中為window.event，

btn.onclick = function(event){let e = event || window.event}

事件源對象

簡單來說，就是指事件具體是在那個對象上發(fā)生的，對于element元素來說，事件源對象就是指你所點擊的元素。同樣存在瀏覽器兼容問題：

• 在fireFox中為event.srcElement

• 在IE中為event.target
  兼容寫法參照事件對象

事件流

事件流主要分為兩類：1.捕獲事件 2.冒泡事件 觸發(fā)順序是先捕獲在冒泡
但是如果細分的話在捕獲到冒泡階段會存在一個目標(biāo)階段，即所具體操做的dom元素要進行的操作階段

捕獲事件

先由最上一級的節(jié)點先接收事件，然后向下傳播到具體的節(jié)點。eg：當(dāng)用戶點擊了p元素，采用事件捕獲，則click事件將按照document>htm>body>p的順序進行傳播。傳遞方式是由外向內(nèi)傳遞。

冒泡事件

和捕獲事件相反，它是由內(nèi)向外傳遞，當(dāng)用戶點擊p時它會向父級傳遞，p>body>html。***由于這種特性常常用于事件委托。

事件委托

我們將所有子元素要觸發(fā)的相同事件綁定到父元素身上，這樣可以減少對DOM操作提高性能。具體使用方法是使用事件源對象的方法。

        
1
        
2
        
3
        
4
        
5
    

要對li綁定點擊事件，通常我們的做法是循環(huán)給li田間點擊事件

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

而使用事件委托的方法是

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

• 優(yōu)點

• 提高性能，不需要循環(huán)所有元素一個一個綁定事件。

• 靈活，有動態(tài)創(chuàng)建進來的新元素不需要重新綁定事件。

阻止事件冒泡和阻止默認事件

阻止事件冒泡的操作（兼容性寫法）

***有些事件不需要進行冒泡操作

function stopBubble(event){
    var e = event||window.event //事件對象兼容寫法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容寫法}

阻止默認事件（兼容寫法）

***阻止a標(biāo)簽以及鼠標(biāo)右鍵默認跳轉(zhuǎn)和菜單事件

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

到此，相信大家對“js中的事件對象、事件源對象和事件流實例分析”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！