项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样;
这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:
var EventUtil={
//节点、事件名、事件处理函数
addHanler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//这里一个参数为false意为在事件冒泡阶段调用事件处理程序,true为事件捕获阶段调用
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);//IE8及以下只支持事件冒泡
}
else{
element["on"+type]=handler;//DOM0级对每个事件只支持一个事件处理程序
}
}
RemoveHanler:function(element,type,handler){
if(element.RemoveEventListener){
element.RemoveEventListener(type,handler,false);
}
else if(element.detachEvent)
{
element.detachEvent("on"+type,handler);
}
else{
element["on"+type]=null;//移除
}
}
//返回对event对象的引用
getEvent:function(event){
return event?event:window.event;
}
//返回事件目标
getTarget:function(event){
return event.target||envet.srcElement;
}
//取消事件默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnVlaue=false;
}
}
//阻止事件流
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancleBubble=true;
}
}
}

js跨浏览器事件对象、事件处理程序的更多相关文章

  1. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...

  2. JS跨浏览器的事件处理

    1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...

  3. store.js 跨浏览器的localStorage

    store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...

  4. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  5. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

  6. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

  7. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  8. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  9. js跨浏览器的事件处理函数

    /* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...

随机推荐

  1. 在Windows Azure公有云环境部署企业应用

    作者 王枫 发布于 2014年4月5日 企业内部应用转换为在线服务 Windows Azure已经成为众多IT服务提供商们热议的话题,其中,有的认为只有提供互连网用户服务的应用才适合放在公有云环境内运 ...

  2. 【转】VirtualBox下Ubuntu共享文件

    原文网址:http://www.it165.net/os/html/201209/3435.html 今天想从主机上拷贝几个文件到 VirtualBox 的 Ubuntu 下, 但是, Virtual ...

  3. dos攻击与防御

    SYN Flood攻击 标准的TCP三次握手过程如下: 客户端发送一个包含SYN标志的TCP报文,SYN即同步(Synchronize),同步报文会指明客户端使用的端口以及TCP连接的初始序号:  服 ...

  4. Windows Phone8开发工具包简述(转载)

    Windows Phone 软件开发包 (SDK) 8.0 可为您提供开发 Windows Phone 8 和 Windows Phone 7.5 应用和游戏所需的工具. 概述Windows Phon ...

  5. Bzoj 4034: [HAOI2015]T2 树链剖分,子树问题,dfs序

    4034: [HAOI2015]T2 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1841  Solved: 598[Submit][Status] ...

  6. [ZETCODE]wxWidgets教程七:对话框

    本教程原文链接:http://zetcode.com/gui/wxwidgets/dialogs/ 翻译:瓶哥 日期:2013年12月9日星期一 邮箱:414236069@qq.com 主页:http ...

  7. 解popstar

    游戏介绍 http://baike.baidu.com/view/9773832.htm 实现过程: 实现完整的游戏逻辑,包括消除,合并等,也就是实现一个完整的游戏功能. 找出每个连通的星星区域,每个 ...

  8. weekend110(Hadoop)的 第二天笔记

    (2015年1月11日) 课程目录 01-NN元数据管理机制 02-NN工作机制2 03-DN工作原理 04-HDFS的JAVA客户端编写 05-filesystem设计思想总结 06-hadoop中 ...

  9. Yii PHP 框架分析 (一)

    Yii PHP 框架分析 (一)作者:wdy http://hi.baidu.com/delphiss/blog/item/f7da86d787adb72506088b4b.html 基于yii1.0 ...

  10. MAC 下安装opencv遇到问题的解决方法(安装homebrew, wget)

    遇到问题: (1)Mac安装OpenCV下载ippicv_macosx_20141027.tgz失败解决方案 先附上当时的报错信息: -- ICV: Downloading ippicv_macosx ...