项目中有时候会不用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. Android Http Server

    Android Http Server 1 引言          Android如何构建Http服务器呢?本文的小例子,约莫着,还是能做个参考的^^.恩,例子实现的是PC浏览手机文件,支持了下载和删 ...

  2. List<object>排序 z

    一般我們在撰寫程式時,很常會使用到List<>來裝取自定義的類別陣列,跟一般的陣列插在哪呢?!好處是什麼?!好處就是一般的陣列需要先 宣告長度,而List<>不用,所以在資料個 ...

  3. HDU-2539 点球大战

    点球大战 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. Parallels Desktop 7用bootcamp安装win7 后如何激活WIN7

    在parallels的选项中,在硬件选项卡的引导标记中添加:kernel.waet.enable=0 ,重新启动win7即可激活.

  5. 搜狗一道java题目 关于对象 synchronized 关键字作用在 int, integer

      第一次见到这个题目,我觉得自己没学到java,太浅了,其实这个问题没有考synchronized关键字,只是考什么是对象? 1.在java编程思想的第二章有一句话; 一切都是对象,很可惜int,c ...

  6. Keepass TAN 记录的使用

    之前一直不知道 Keepass 软件中这个“TAN”是做什么用的,今天看了帮助文档,然后通过维基百科,有了一些大致的了解. 简单来说,一个 TAN 记录用于某些网站增加安全操作使用的.常规下只要用户名 ...

  7. 各种jee服务器的比较,tomcat, jboss, glassfish, websphere, weblogic

    tomcat, 开源,只是一个 servlet jsp 容器. jboss, 开源,是一个j2ee 应用服务器,容器支持 servlet, jsp, ejb,jms等. 稳定且实现了全部j2ee ap ...

  8. Linux下常用I/O模型

    Linux异步I/O是Linux内核中提供的一个相当新的增强.它是2.6版本内核的一个标准特性,异步非阻塞I/O背后的基本思想是允许进程发起很多I/O操作,而不用阻塞或等待任何操作完成.稍后或在接收到 ...

  9. phpDesigner 工具快捷键巧用

    Zend Studio工具默认的快捷方式, 如果你从事php工作, 自然能够体会到一些便利性, 比如CTRL+D, 可以直接复制当前一行, 这对于重复代码及调试都有很大帮助. Ctrl+U转换大小写之 ...

  10. 395. Coins in a Line II

    最后更新 这个题做得也不好,dp[n]尝试写了几下,不太对. 应该是类似于gem theory的题. 当只有1个硬币剩下的时候直接拿走,不BB. 剩俩的时候也都拿了.. dp[n]表示剩下多少个硬币. ...