兼容事件模型

标签：

　　为了客姥爷的用户体验,我们必须做兼容处理,我们可以

1.通过提供统一的api(不兼容就是api不统一,有没有一种越走越远的感觉...),通过鸭辨式找到浏览器提供的相似功能进行兼容

2.使用浏览器提供的最基本的功能进行模拟

兼容模型

在事件模型兼容性中,我们需要兼容以上浏览器,其中ie6,7,8使用的是ie事件模型,其他的则为标准dom模型,可以简单的理解为非ie即dom,大致有2中思路

1.鸭辨式,有dom事件接口即使用,否则就是用ie事件接口

2.通过传统事件模拟事件高阶性质

鸭辨式

            Element.prototype.addEvent = function(type, fn, useCapture) {
                if (this.addEventListener) {
                    this.addEventListener(type, fn, !!useCapture); //dom模型
                } else {
                    this.attachEvent("on" + type, fn); //ie模型
                }
            }

标准的鸭辨式,有点代理的意思,javascript可以进行方法的传递/赋值,所以,也可以这样

        Element.prototype.addEvent = this.addEventListener?this.addEventListener:function(type, fn){
            this.attachEvent("on" + type, fn);
        }

利用了方法赋值的特性,使的检测只进行一次(当然,这里面有坑,不管他),或者干脆将addEvent取名为addEventListener

无论如何,事件兼容,我们做到了,但这里面有几个坑

1.鸭辨式总是不准的(尤其是国内,尼玛,提供个空接口是几个意思)

2.ie模型和dom模型也是一点点在规范,每个版本浏览器都有一点点的不一样(一群一点点比一样会要人命的)

所以,通过传统方式自制事件模型也是必须的

自制事件模型

先按照dom模型画个图图压压惊,在模拟事件中,只是用传统方式,即onxxx系列

这里我认为传播不需要模拟(我模拟过一次,很容易就执行2遍),可以说是只模拟多投事件,可以看到就是一个事件数组的封装

兼容事件模型

标签：

原文地址：http://www.cnblogs.com/liuCy/p/4395027.html