让js脚本具有跨浏览器兼容的事件处理,是一个程序员应该注意的基本问题,让自己编写的js脚本更具有移植性。
到目前为此,许多js程序员编写的代码里的事件处理过程都是老版本的,DOM之前的事件处理模型,许多主流的浏览器
仍然能提供对老版本模型的支持,但是Javascript开发人员应该多采用新的,基于规范的事件处理模型,也就是被称做
Dom Level 2的事件模型。老事件模型和新的Dom Level 2事件模型之间,最主要的区别在于:
1.新事件模型并不依赖于特定的事件来处理属性。
2.你可以对任何一个对象的任何一种事件注册多个事件句柄函数。
用来替代事件句柄属性的每个对象提供的3个方法:addEventListener、removeEventListener和dispatchEvent。第一个方法用来添加
一个事件监听器,第二个方法用来删除一个事件监听器,第三个用来分发一个新事件。
addEventListener的语法是:
下载:yovae.js
- addEventListener('event',eventFuntion,boolean);//第一个参数是事件如click或load,第二个参数是自定义事件处理方法,第三个参数如果 //为false则事件监听器将以冒泡方式处理,如为true则用事件捕获方法处理。
因为各个浏览器在事件处理机制有所不同,特别是微软的IE浏览器只支持自己的事件处理机制,我写了一个可以重用的跨浏览器兼容事件处理方法,代码如下:
下载:yovae.js
- <scripttype="text/javascript">
- //<![CDATA[
- functioncatchEvent(eventObj,eventBody,eventHandler){//添加事件监听方法
- if(eventObj.addEventListener){
- eventObj.addEventListener(eventBody,eventHanndler,false);
- }
- elseif(eventObj.attachEvent){
- eventBody="on"+eventBody;
- eventObj.attachEvent(eventBody,eventHanlder);
- }
- }
- functioncanncelEvent(eventBody){//取消一个事件方法
- if(eventBody.preventDefault){
- eventBody.preventDefault();
- eventBody.stopPropagation();
- }
- else{
- eventBody.returnValue=false;
- eventBody.cancelBubble=true;
- }
- }
- //]]>
- </script>
相关推荐
客户端JavaScript编程的历史真的是DOM发展的历史(有时候是以不兼容的方式发展的)。在Web的早期,Netscape是领先的浏览器厂商,并且它为客户端脚本定义了API。Netscape 2和Netscape 3支持一个简单的DOM,它提供了...
Cure.js 是 JavaScript polyfill 的集合,可帮助确保您的 Web 环境跨浏览器兼容并且您的 JavaScript 引擎正确执行。 注意:目前 Cure.js 只包含一小部分原生 JavaScript 对象的 polyfills(特别是在的其他项目中使用...
兼容多浏览器 javascript日历兼容多浏览器 javascript日历
使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误”Invalid Date”。 想着估计是字符串格式的问题,改成’2016/11/11 11:11:11’再测试,结果正常,以为这样应该没问题了,再用手机浏览器继续访问,android...
87、原生JavaScript动态执行JavaScript脚本 88、原生JavaScript动态执行VBScript脚本 89、原生JavaScript实现金额大写转换函数 90、原生JavaScript常用的正则表达式大收集 91、原生JavaScript实现窗体改变事件resize...
本文是脚本之家小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。 下面是兼容...
通过8个真实项目示例,介绍了JavaScript核心语言、BOM、事件处理、DOM、修改CSS样式表以及数据检索等内容。 本书适合具有一定网页开发经验的Web开发人员阅读。 本资料共包含以下附件: ppk谈JavaScript.pdf 和 ppk...
基于确保库,但重写并提高了与现代设备和浏览器的兼容性。 在 IE6、IE7、IE8、IE9、Safari、Chrome、Firefox、Opera 上测试。 requireOnce 试图解决的问题是按需加载需要的资源。 如果资源在运行期间需要多次,则...
有时开发者只是想利用浏览器编制一些简单的脚本完成一些任务,不想学习C、C++、Python生成exe这么大动作,例如使用JavaScript脚本读取本地一个excel文件进行统计分析。但由于浏览器无法使用本地文件这个限制,只好...
过期的Webpack插件介绍 :glowing_star: Webpack插件生成一个浏览器端独立脚本,该脚本基于检测浏览器兼容性,并提示网站用户对其进行升级。动机 :collision: 在现代的前端开发中,我们使用工具链将下一个JavaScript...
使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在[removed]=function(){}事件处理函数中,但[removed]事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会...
这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的。需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行。 时代变迁,很多新的...
ca设置浏览器兼容性可移植npm脚本 文件:/// C:/Program Files/nodejs/node_modules/npm/docs/public/cli-commands/npm-install/index.html 浏览器兼容性和翻译。 让我们回顾一下关键概念: ES5-所有现代Web...
该工具由两部分组成:构建脚本和前端 JavaScript 库。 需要这两种工具才能使此功能在所有现代浏览器上正常工作。自定义 CSS 属性的内幕CSS 中的自定义样式无论如何都不会被 CSS 理解。 这个想法只是在 CSS 中提供...
作为一个Web前端工作者,你是否在工作中常被浏览器兼容性问题所困惑.例如Css样式? 明明在 IE浏览器里显示一切正常的网页.到了FireFox或谷歌浏览器中却乱作一团.或许你在使用JavaScript和Dom编写网页脚本时,也...
跨平台兼容性:JavaScript在各种主流浏览器中都得到广泛支持,包括Chrome、Firefox、Safari和Edge等。它也可以在服务器端使用Node.js运行。 面向对象编程:JavaScript支持面向对象编程范式,可以使用构造函数和原型...
①智能代码完成 相对于其他类型的语言,JavaScript 的...Aptana Studio 深谙这一需求,在开发阶段便尽量扼杀浏览器兼容性隐患:在 JavaScript 的每一个属性或方法提示之后,均会跟随该属性或方法适用于的浏览器类型。
1.2跨浏览器的不兼容性和其他常见的JavaScript传说 1.3你能用JavaScript来做什么 1.4JavaScript初探:“HelloWorld!” 1.5JavaScript沙箱 1.6可访问性和JavaScript的最佳实践 第2章JavaScript数据类型与变量 2.1...
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理...