成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

跨瀏覽器的事件代理

el09xccxy / 1290人閱讀

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

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

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

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

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

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

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

IE的事件處理程序除了從方法名字的不同，還有其他的一些不同，來(lái)做一個(gè)總結(jié)：

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

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

    
    
  • book 1
    • 
    
  • book 2
    • 
    
  • book 3
    • 
    
  • book 4
    •

我們想要實(shí)現(xiàn)一個(gè)效果，點(diǎn)擊"

  • "的時(shí)候，彈出此"
  • "內(nèi)的文字。我們采用代理的方式，利用時(shí)間的冒泡把事件綁定到‘
      ’上，而不是每一個(gè)‘
    • ’上面:

      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;
}

    • 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83658.html

    相關(guān)文章

    • JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點(diǎn)

      摘要：跨文檔消息傳送，有時(shí)候也簡(jiǎn)稱為，指的是來(lái)自不同域的頁(yè)面間傳遞消息。接收到消息時(shí)，會(huì)觸發(fā)對(duì)象的事件。接受到消息后驗(yàn)證發(fā)送窗口的來(lái)源是至關(guān)重要的?；镜臋z測(cè)模式如下。 跨文檔消息傳送（cross-document messaging），有時(shí)候也簡(jiǎn)稱為XDM，指的是來(lái)自不同域的頁(yè)面間傳遞消息。例如，www.wrox.com域中的一個(gè)頁(yè)面與一個(gè)位于內(nèi)嵌框架中的p2p.wrox.com域中的頁(yè)面...

      TerryCai 評(píng)論0 收藏0

    • 面試題重點(diǎn)突出

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

      alighters 評(píng)論0 收藏0

    • JavaScript 設(shè)計(jì)模式（四）：適配者模式

      摘要：與其它模式的異同適配器模式不會(huì)改變?cè)薪涌?，這一點(diǎn)與裝飾者模式和代理模式類似。代理模式適配器模式與代理模式最相似，同樣都是創(chuàng)建一個(gè)新對(duì)象包裝一次，實(shí)現(xiàn)對(duì)本體的調(diào)用。外觀模式外觀模式與適配器模式最大的區(qū)別，是定義了一個(gè)新的接口。 showImg(https://segmentfault.com/img/bVbul8d?w=800&h=600); 適配器模式：將一個(gè)類（對(duì)象）的接口（方法或...

      MingjunYang 評(píng)論0 收藏0

    • 跨域問(wèn)題匯總

      摘要：因?yàn)闉g覽器的同源策略，前端開發(fā)會(huì)遇到各種跨域問(wèn)題。前言在總結(jié)各種跨域問(wèn)題之前，我們先來(lái)了解一下瀏覽器的同源策略。所以只能解決一級(jí)域名相同二級(jí)域名不同的跨域問(wèn)題。 跨域問(wèn)題的場(chǎng)景和解決方案多種多樣，只要是做前端開發(fā)，總會(huì)遇到。而且面試時(shí)也是必問(wèn)的問(wèn)題。所以自己學(xué)習(xí)總結(jié)記錄一下。 因?yàn)闉g覽器的同源策略，前端開發(fā)會(huì)遇到各種跨域問(wèn)題。本篇文章總結(jié)了遇到跨域問(wèn)題的不同的場(chǎng)景以及對(duì)應(yīng)的解決方案。 ...

      MkkHou 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <