盘点JavaScript中的事件和三种事件模型

大家好，我是皮皮。前言我们知道很多编程语言都有事件的概念，JavaScript中也存在事件。原因也很简单。我们知道HTML是页面结构层，相当于人体骨骼；CSS是样式层，相当于人的外表；但是它是静态的，人要能动能动，所以就产生了JavaScript；JavaScript用于控制页面元素，产生与用户的动态交互效果，构成了今天丰富多样的界面。今天我们就来了解一下js中的事件；1.事件相关的概念事件：指用户的鼠标动作和键盘动作，文档的加载和卸载，事件被封装成一个事件对象，包含了事件发生时所有相关事件的信息（事件的属性）以及可以对事件执行的操作（事件的方法）。比如点击页面上的一个按钮，产生的事件对象如下：上面可以看到是一个MouseEvent对象，里面包含了一系列的属性，比如鼠标点击的位置。window.onload监听函数中打印键盘按下时产生的事件对象，如下：注意：Event类是MouseEvent和KeyboardEvent的父类；2、事件对象的常用属性和方法2.1事件定位相关属性MouseEvent对象中的属性，很多带有X/Y的，都是与事件的位置相关的。具体包括：x/y、clientX/clientY、pageX/pageY、screenX/screenY、layerX/layerY、offsetX/offsetY六对；之所以有这么多，是因为浏览器厂商在版本变更时存在很多不一致的地方：以移动鼠标为例：x属性Y属性函数xY离浏览器左/上可视区域的距离（除了工具栏区域）；clientXclientY距浏览器左/上可视区域（工具栏区域除外）的距离（同上）；screenXscreenY是距电脑显示器左/上的距离，拖动浏览器窗口位置可以看到变化；offsetXoffsetY是距具有定位属性的父元素左/上的距离；(不算边框)pageXpageY是距离页面左边/顶部的距离，它和clientX/clientY的区别是不随着滚动条的位置而改变；layerXlayerY是离有定位属性的父元素left/top的距离（计算边框）；之所以有这么多值是相同的，在这种情况下，是因为浏览器的兼容性。不同属性的浏览器兼容性如下；（+支持，-不支持）浏览器offsetX/offsetYx/ylayerX/layerYpageX/pageYclientX/clientYscreenX/screenYW3C----++IE++--++Firefox--++++Opera++-+++Safari++++++chrome+++++说明：详情请咨询参考https://www.caniuse.com/2.2其他常用属性target：事件发生的节点；currentTarget：当前正在处理的事件的节点，在事件捕获或冒泡阶段；timeStamp：事件发生的时间，timestampbubbles：事件是否冒泡。cancelable：事件是否可以使用preventDefault()方法取消默认动作；keyCode：按下的键的值；2.3事件对象方法event。preventDefault()：阻止元素的默认行为，如链接跳转，表单提交；event.stopPropagation()：阻止事件冒泡；event.initEvent()：初始化新事件对象的属性，会使用自定义事件，不常用；event.stopImmediatePropagation()：可以防止同一事件的其他优先级较低的监听器的处理，很少使用；3.事件的三种模型3.1原始事件模型（DOM0层）在原始事件模型中，没有事件发生后传播的概念，也没有事件流。一旦发生事故，立即处理。监听器函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。有两种写法：在HTML代码中指定属性值：在js代码中指定属性值：document.getElementsByTagName('input')[0.onclick=func1优点：兼容所有浏览器缺点：逻辑和显示没有分离；同一个事件只能绑定一个监听函数，后面绑定的会覆盖前面的，比如：a.onclick=func1;a.onclick=func2;只会执行func2中的内容；更多的事情不能通过事件冒泡、委托等机制来完成；3.2IE事件模型“IE不会将这个对象传入事件处理函数，因为任何时刻只会有一个事件，所以IE将其视为全局对象window的一个属性”，执行代码alert(window.event)用IE8，弹出结果为null，说明属性已经定义，但是值为null（区别于undefined），代码如下；window.onload=function(){alert(window.event);}setTimeout(function(){alert(window.event);},2000);第一个弹出窗口[objectevent]，两秒后弹出窗口仍然为null。可以看出，IE在处理函数中将事件对象设置为window的一个属性，函数一旦执行，就设置为null；IE的事件模型只有两步：首先执行元素的监听函数，然后事件跟随父Nodes冒泡到document。IE模型下的事件监听方式比较独特。绑定监听函数的方法是：attachEvent("eventType","handler");//其中evetType是事件的类型，比如onclick，注意加'on'。去掉事件监听器的方法是：detachEvent("eventType","handler")IE的事件模型已经可以解决原模型的三个缺点，但是它本身的缺点就是兼容性，只有IE系列的浏览器才能这样写。3.2DOM2事件模型该模型是W3C制定的标准模型。既然是标准，现代浏览器（IE6~8除外的浏览器）都遵循了这个规范。在W3C制定的事件模型中，一个事件的发生包括三个过程：捕获阶段：事件捕获阶段。该事件从文档向下传播到目标元素。在这个过程中，依次检查经过的节点是否已经注册了事件的监听函数，如果是，则执行；目标阶段：事件处理阶段。当事件到达目标元素时，执行目标元素的事件处理函数；冒泡阶段：事件冒泡阶段。事件从target元素上升到document，也会依次检查传递的节点是否注册了事件的监听函数，有则执行；所有事件类型都会经历捕获阶段，但只有一些事件会经历冒泡阶段，例如提交事件。不会起泡。标准事件侦听器绑定：addEventListener("eventType","handler","true|false");其中eventType指的是事件类型。第二个参数为处理函数，第三个用于指定是否在捕获阶段进行处理，一般设置为false与IE保持一致。监听器的释放也类似：removeEventListner("eventType","handler","true!false");以上是事件的三种模型，我们在开发的时候需要同时考虑IE和非IE浏览器，所以注册一个监听器应该这样写：vara=document.getElementById('a');if(a.attachEvent){a.attachEvent('onclick',func);}else{a.addEventListener('click',func,false);}4.总结在本文中，我们对JavaScript事件做了一个基本的介绍，熟悉了事件的相关概念，事件的共同属性和方法，事件的三种模型。非常重要，想详细了解活动的朋友可以参考官方手册。http://www.javascriptcn.com/