跨浏览器的事件代理

el09xccxy 发布于2019-08-20 17:32 / 1349人阅读

摘要：假设我们有这样的一段我们想要实现一个效果，点击的时候，弹出此内的文字。我们采用代理的方式，利用时间的冒泡把事件绑定到上，而不是每一个上面

我们知道，在主流的浏览器里面绑定事件处理程序和解绑分别是:

绑定：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;
}

GPU云服务器云服务器 php代理代理跨域 Web跨浏览器 js 跨浏览器存储事件代理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
【面试篇】寒冬求职季之你必须要懂的原生JS(中)

摘要：如果你还没读过上篇上篇和中篇并无依赖关系，您可以读过本文之后再阅读上篇，可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章，篇幅较长，希望大家阅读时多花点耐心，力求真正的掌握相关知识点。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原型链，就...

Mike617 2019-08-23 17:04 评论0 收藏0
跨域问题汇总

摘要：因为浏览器的同源策略，前端开发会遇到各种跨域问题。前言在总结各种跨域问题之前，我们先来了解一下浏览器的同源策略。所以只能解决一级域名相同二级域名不同的跨域问题。跨域问题的场景和解决方案多种多样，只要是做前端开发，总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。因为浏览器的同源策略，前端开发会遇到各种跨域问题。本篇文章总结了遇到跨域问题的不同的场景以及对应的解决方案。 ...

MkkHou 2019-08-21 17:46 评论0 收藏0