兼容事件模型

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

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

兼容事件模型的相关文章

【repost】JavaScript 事件模型 事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件 在漫长的演变史,我们已经告

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的

js中的Dom事件模型以及表格方面等内容

1.实现评论页面的制作 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #outside{ width: 1000px; margin: 0 auto; border: 1px solid #E7EAEE; overflow: hidden; pad

事件模型

事件模型有三种: 内联模型:与HTML代码紧密耦合在一起,没有实现相互分离,维护和更新代码困难 脚本模型:也称为DOM0级模型,是为了解决内联模型上述的问题 DM2级模型:解决脚本模型不能给同一个元素添加多个事件,只会执行最后一个事件的问题 1 input.onclick = function(){ 2 alert("我是事件一"); 3 } 4 input.onclick = function(){ 5 alert("我是事件二"); 6 } 比如我给input标

ExtJS框架基础:事件模型及其常用功能

前言 工作中用ExtJS有一段时间了,Ext丰富的UI组件大大的提高了开发B/S应用的效率.虽然近期工作中天天都用到ExtJS,但很少对ExtJS框架原理性的东西进行过深入学习,这两天花了些时间学习了下.我并不推荐大家去研究ExtJS框架的源码,虽然可以学习其中的思想和原理,但太浪费精力了,除非你要自己写框架. 对于ExtJS这种框架,非遇到"杂症"的时候我觉得也没必要去研究其源码和底层的原理,对其一些机制大致有个概念,懂得怎么用就行,这也是本篇博文的主要目的. Ext自己的事件机制

JS的事件模型

之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的 局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开 始淡出记忆中,就像我现在已经开始淡忘C语言的指针.麦克斯韦方程组.矩阵的变换.最小二乘 法等.知识就像五彩缤纷的鹅卵石铺垫在你前行的道路上,从简单到深刻,从深刻到领悟,一直 助你渐行渐远.回头看看事件模型呗. 一.事件简简介事件包括:鼠标事件键盘事件框架事件 onerror onresize onscroll等表单事件事件 onb

javascript 事件传播与事件冒泡,W3C事件模型

说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这就叫做"事件冒泡".然而,事情要是这么简单的话,相信笔者这时一定已经迎娶了白富美,当上了CEO.坏就坏在后来又听说一个"事件传播" ,尼玛不是"事件冒泡"吗,然后又听说了"W3C事件模型"...到了最后笔者彻底心碎了,只能乖乖的当

07-jquery事件模型

jquery事件模型: dom0级事件模型: 阻止冒泡:event.stopPropagation(); 阻止冒泡:event.cancelBubble = true; 只支持一个事件处理函数: dom2级事件模型: addEventListener(eventType) addEventListener(listener) addEventListener(useCapture):如果为false,只冒泡不捕获,如果为true,只捕获,不冒泡. attachEvent(eventName,ha

JavaScript事件模型及事件代理

事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模型. 1.原始事件模型(DOM0级) 这是一种被所有浏览器都支持的事件模型,对于原始事件而言,没有事件流,事件一旦发生将马上进行处理,有两种方式可以实现原始事件: (1)在html代码中直接指定属性值:<button id="demo" type="button"