跨瀏覽器的事件代理

el09xccxy 發布于2019-08-20 17:32 / 1285人閱讀

摘要：假設我們有這樣的一段我們想要實現一個效果，點擊的時候，彈出此內的文字。我們采用代理的方式，利用時間的冒泡把事件綁定到上，而不是每一個上面

我們知道，在主流的瀏覽器里面綁定事件處理程序和解綁分別是:

綁定：addEventListener(eventType, handler, useCapture);
解綁：removeEventListener(eventType, handler, useCapture);

eventType: 事件的名字，string類型，例如‘click’
handler: 事件處理程序，function類型
useCapture: 
    如果為true, handler在事件捕獲階段執行
    如果為false, handler在事件冒泡階段執行

然而IE9之前，IE的事件處理程序是不一樣，首先看看它的兩個方法：

綁定：attachEvent(eventNameWithOn, handler)
解綁：detachEvent(eventNameWithOn, handler) 

eventNameWithOn: 事件的名字,并且前面有‘on’
handler: 事件處理程序

IE的事件處理程序除了從方法名字的不同，還有其他的一些不同，來做一個總結：

1: 參數不同
  IE版本沒有useCapture這個參數，因為IE只支持冒泡，所以也沒必要給出這個參數了。也可以理解為在attachEvent()和detachEvent()內useCapture為false.
2: this不同
  在非IE的其他瀏覽器中，我們傳遞給事件處理程序(handler)的this是事件目標元素（也就是我們的target）;但是，IE的this卻是Window
3: Event對象不同
  在非IE的其他瀏覽器中，我們會把Event對象傳給我們的事件處理程序（handler），但是IE卻沒有，而是作為一個屬性綁定在了Window上
4: 在非IE的其他瀏覽器中和IE的Event實例中的內容是不一樣的
    1: 事件源： target -> srcElement(IE)
    2: 阻止瀏覽器默認行為：preventDefault -> returnValue = false(IE)
    3: 阻止事件冒泡： stopPropagation -> cancelBubble = true
    其實還有很多的不同，以上三點算是比較重要又普遍的

所以如果我們要實現一個跨瀏覽器的事件代理，就要處理IE的那些不同。假設我們有這樣的一段HTML:


    book 1
    book 2
    book 3
    book 4

我們想要實現一個效果，點擊"

"的時候，彈出此"

"內的文字。我們采用代理的方式，利用時間的冒泡把事件綁定到‘

’上面:

var bookList = document.getElementsByClassName("bookList")[0];

if(document.addEventListener){
    bookList.addEventListener("click", function(event){
        var target = getTarget(event);
        if(target.nodeName === "LI"){
            alert(target.innerHTML);
        }
    })
}
if(document.attachEvent){
    bookList.attachEvent("click", function(event){
        var target = getTarget(event);
        if(target.nodeName === "LI"){
            alert(target.innerHTML);
        }
    })

}

function getTarget(event){
    var event = event || window.event;
    var target = event.target || event.srcElement;
    return target;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83658.html

JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點

摘要：跨文檔消息傳送，有時候也簡稱為，指的是來自不同域的頁面間傳遞消息。接收到消息時，會觸發對象的事件。接受到消息后驗證發送窗口的來源是至關重要的。基本的檢測模式如下。跨文檔消息傳送（cross-document messaging），有時候也簡稱為XDM，指的是來自不同域的頁面間傳遞消息。例如，www.wrox.com域中的一個頁面與一個位于內嵌框架中的p2p.wrox.com域中的頁面...

TerryCai 2019-08-19 17:33 評論0 收藏0
面試題重點突出

摘要：存在跨域的情況網絡協議不同，如協議訪問協議。瀏覽器對的資源引用沒有同源限制，同時資源加載到頁面后會立即執行沒有阻塞的情況下。這兩種方式都允許開發者使用設置的鍵值對進行操作，在在重新加載不同的頁面的時候讀出它們。什么是跨域？跨域請求資源的方法有哪些？ 1、什么是跨域？由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：網絡協...

alighters 2019-08-23 14:25 評論0 收藏0
JavaScript 設計模式（四）：適配者模式

摘要：與其它模式的異同適配器模式不會改變原有接口，這一點與裝飾者模式和代理模式類似。代理模式適配器模式與代理模式最相似，同樣都是創建一個新對象包裝一次，實現對本體的調用。外觀模式外觀模式與適配器模式最大的區別，是定義了一個新的接口。 showImg(https://segmentfault.com/img/bVbul8d?w=800&h=600); 適配器模式：將一個類（對象）的接口（方法或...

MingjunYang 2019-08-23 18:18 評論0 收藏0
跨域問題匯總

摘要：因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。前言在總結各種跨域問題之前，我們先來了解一下瀏覽器的同源策略。所以只能解決一級域名相同二級域名不同的跨域問題。跨域問題的場景和解決方案多種多樣，只要是做前端開發，總會遇到。而且面試時也是必問的問題。所以自己學習總結記錄一下。因為瀏覽器的同源策略，前端開發會遇到各種跨域問題。本篇文章總結了遇到跨域問題的不同的場景以及對應的解決方案。 ...

MkkHou 2019-08-21 17:46 評論0 收藏0