浏览器兼容(JS部分)

2018-07-22 admin

添加事件/移除事件方法

clipboard.png

分别检验是否是DOM2级,IE、DOM0级。 DOM0级:将一个函数赋给一个事件处理程序属性。具有简单、跨浏览器的优势。添加的事件处理程序会在冒泡阶段执行。事件处理程序也是在它所依附的元素作用于中执行。 删除事件处理程序:将事件处理程序的属性的值设为null。 DOM2级:DOM2级事件处理方法:addEventListener()和removeEventListener(),这两种方法 接受三个参数,要处理的事件名,作为事件处理程序的函数和一个布尔值,布尔值为true时,表示在捕获阶段调用事件处理函数;布尔值为false,表示在冒泡阶段调用事件处理函数。 调用addEventListener()添加的事件处理程序只能通过removeEventListener()移除,移除时传入的参数和添加处理程序时使用的参数必须一致。所以通过addEventListener()添加的匿名函数无法移除。与DOM0级相同,事件处理程序也是在它所依附的元素作用于中执行。 大多数情况下将事件处理程序添加到事件流的冒泡阶段,可以最大限度的兼容各种浏览器。 IE事件处理程序:两个方法:attachEvent()和detachEvent()。接收两个参数:要处理的事件名,作为事件处理程序的函数。与上述两种情况的主要区别是作用域不同:attachEvent()和detachEvent()会在全局作用域中执行。 除了作用域的区别外,DOM2级和IE事件处理程序可以添加多个事件处理程序,而OM0级只能添加一个。

获取事件及事件对象目标

clipboard.png event:事件处理对象,包含与创建它的特定事件有关的属性和方法。其中target(事件的目标)是其中一个成员。 在兼容DOM的浏览器中,event对象只是简单的传入和返回。而IE中,event参数是为定义的,因此就会返回window.event。 返回事件的目标,IE中为event.srcElemnt。

阻止浏览器默认事件及阻止冒泡的兼容性写法

clipboard.png 阻止浏览器默认事件:IE中为:event.returnValue=false 阻止事件冒泡:IE中为cancelBubble=true,因为IE中只有事件冒泡,所以只能取消事件冒泡。 stopPropagatation()既能阻止事件冒泡也能阻止事件捕获。

获取mouseover和mouseout事件相关元素信息

clipboard.png DOM 通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对mouseover和mouseout事件才包含值,对于其他事件,这个属性值为null。在mouseover事件触发时,IE的fromElement属性保存了相关元素,在mouseout事件触发时,IE的toElement属性保存了相关元素。

鼠标滚轮判断

clipboard.png

clipboard.png

能够获取鼠标滚轮增量的方法

clipboard.png 该事件兼容性问题存在于:opera、Firefox和其他浏览器之间。

跨浏览器获得字符编码

clipboard.png IE9,Firefox,Chrome,Safari的event对象都支持charcode属性,在发生keypress事件时才包含值。值为按下那个键所对应的ASCII编码。IE8及之前版本和Opera则使用keyCode。

访问、设置剪切板中的数据

clipboard.png 要访问剪切板中的数据,可以使用clipboardData对象:IE中,这个对象是window对象的属性;而在Firefox,Chrome,Safar中,这个对象是event对象的属性。

原文链接:https://segmentfault.com/a/1190000015722419

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-36544.html

文章标题:浏览器兼容(JS部分)

相关文章
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
回到顶部