js二级事件模型的处理细节
一、纠正网络上的一个误传--“IE不支持事件捕获”
可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在命中元素上事件的触发的顺序会稍有区别,参见下条。
二、在命中元素上冒泡和捕获的执行顺序
命中元素上事件冒泡和捕获的触发顺序在不同浏览器中的顺序稍有区别,在IE6-8中是先触发捕获再触发冒泡,在IE9及以上、chrome、firefox等浏览器是先触发冒泡再触发捕获
三、事件的浏览器兼容方面的东西
浏览器\区别 | 添加监听 | 事件名 | 移除监听 | 仅阻止事件冒泡 |
IE6-8 | attachEvent | 标准事件名+on,如onclick、onmouseover | detachEvent | e = e || window.event;e.cancelBubble = true; |
IE9及以上,chrome等 | addEventListener | 事件名,如click、mouseover | removeEventListener | e = e || window.event;e.stopPropagation(); |
四、事件中的元素关系
获取触发事件监听函数的的元素可以用下面的方法做到浏览器兼容
var evt = e || window.event;
var eventSrc = evt.target||evt.srcElement;
mouseover、mouseout、mousemove等事件还支持fromElement与toElement(IE6也同样支持),表示鼠标从一元素移到另一元素。鼠标的移入移出存在边界整齐对其的情况,此情况下事件会直接跳过那些被遮盖的元素,直接反应鼠标的移入移出元素。另外一个需要注意的问题是IE6下的body会紧缩,所以从页面最边缘向内移动时后出现从HTML移入的情况,如需做边界处理请注意此点。在低级IE下会存在事件下漏的问题,参见第六条。
五、事件中的鼠标位置
用鼠标的位置在应用中做一些判断是一件效率较低且使用场景很局限的事,但是在特定的场景下却又无可奈何,既然我们改变不了浏览器与应用场景那就费点功夫搞明白怎么用现有的这点资源来做一些事情,正所谓人生的意义不在于拿一手好牌,而在于打好一手烂牌。
chrome一共提供了7组与位置有关的信息:clientX、layerX、offsetX、pageX、screenX、webkitMovementX、x;IE的事件提供的位置参数我就不说了,我们以chrome事件的位置参数为标准,用IE固有的属性来模仿。
screenX:鼠标在显示屏幕上的坐标;
clientX:鼠标在页面显示区域的坐标。
offsetX:鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便。
注:以上几个都是各浏览器通用的。
pageX:标准浏览器特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。
layerX:标准浏览器特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
x:IE特有,跟layerX一个效果,可作为layerX的直接替换属性,现代浏览器的现行版本一景支持了该属性。
webkitMovementX:鼠标的移动距离,主要用在一些3D场景中,比如第一视角的游戏,需要计算用户鼠标的移动距离来反馈画面。下面来自mozilla官网的API
This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.
For example, you can create apps that let your users control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. This kind of mouse input is quite handy for viewing maps, satellite imagery, or first-person scenes (such as in a game or an immersive video).
当然老式浏览器就不大算指望他了,下面是一段兼容代码:
document.addEventListener("mousemove", function(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0; // Print the mouse movement delta values
console.log("movementX=" + movementX, "movementY=" + movementY);
}, false);
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。
六、IE的事件下漏解决方案
在低级IE下当两个元素重叠且不设置背景时,鼠标事件会从上面一层的元素漏到下面的元素上。解决此问题是设置背景,如果页面有半透明效果那就需要额外加一个元素设置背景再将其透明度用CSS设为全透明。
相关文章:
之前写的一篇:二级事件模型
别人的一篇优秀博文:浏览器中关于事件的那点事儿
js二级事件模型的处理细节的更多相关文章
- JS的事件模型
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...
- js实现事件模型bind与trigger
function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Em ...
- js 事件模型详解
把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...
- js的事件学习笔记
目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- JS事件模型小结
三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
- js事件模型与自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...
随机推荐
- NFS存储服务部署
第1章 NFS介绍 1.1 NFS服务内容的概述 □ RPC服务知识概念介绍说明,以及RPC服务存在价值(必须理解掌握) □ NFS服务工作原理讲解(必须理解掌握) □ NFS共享文件系统使用原理讲解 ...
- JavaUtil_04_验证码生成器
一.原理 验证码其实就是随机串.原理上可分为两种: 1.简单的验证码 直接通过字母和数字的ASCII码生成.本文采用的验证码就是这种. 2.复杂的验证码 通过一个随机串,一个指定串(如accesske ...
- C#三大方法:虚方法、静态方法、实例方法
虚方法:使用virtual关键字定义,当子类继承父类时,可以对父类中的虚方法进行重写. 如下面代码中的类B,它继承类A,类A实现了接口I(实现了接口中的foo()方法).在类A中使用virtual将f ...
- SQLServer2008数据库安装图解
SQLServer2008数据库安装图解... ======================================= 解压下载的安装包,右键运行Setup.exe文件 =========== ...
- centos6.5安装rabbitmq3.6.14
The minimum version of Erlang/OTP required to run RabbitMQ server 3.6.0 through 3.6.14 is R16B03. St ...
- 无状态的web应用(单个py文件的Django占位图片服务器)
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 阅读本文建议了解Django框架的基本工作流程,了解WSGI应用,如果对以上不是很清楚,建议结 ...
- [原创]阿里云RocketMQ踩过的哪些坑
由于公司的最近开始使用RocketMQ来做支付业务处理, 便开启了学习阿里云RocketMQ的学习与实践之路, 其中踩了不少的坑, 大部份是由于没有仔细查看阿里云的技术文档而踩的坑. 但是有一个非常大 ...
- 【python】python的正则表达式 re
ps:本文摘自互联网,觉得结构很好,讲的也很清晰.记下,备查. 延伸阅读:python的 内建函数 和 subprocess .此文是本系列的第三篇文章了,和之前一样,内容出自官方文档,但是会有自己的 ...
- PHP常用的函数与小技巧
密码加密与验证 password_hash - 创建密码的哈希(hash) string password_hash ( string $password , integer $algo [, arr ...
- 深入理解Postgres中的cache
众所周知,缓存是提高数据库性能的一个重要手段.本文着重讲一讲PostgreSQL中的缓存相关的东西.当然万变不离其宗,原理都是共同的,理解了这些,你也很容易把它运用到其它数据库中. What is a ...