为了客姥爷的用户体验,我们必须做兼容处理,我们可以
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遍),可以说是只模拟多投事件,可以看到就是一个事件数组的封装
时间: 2024-10-15 07:13:32