js事件处理(DOM0,DOM2,IE)
2016-07-13 21:16
399 查看
事件对象event 一、DOM中的事件对象 1 type属性 event.type获取事件类型 2 target属性 event.target.nodeName获取事件目标,事件是来自哪个元素 3 stopPropagation()阻止事件冒泡 4 preventDefault() 阻止事件的默认行为 二、IE中的事件对象 1 type属性,同上 2 srcElement属性 event.srcElemnt 3 cancelBubble属性 当为true时取消冒泡 4 returnValue属性 当为false时阻止事件的默认行为 //跨浏览器事件处理程序 var eventUtil={ //添加句柄 addHandler:function(element,type,handler){ if (element.addEventListener) { //DOM 2级,chrome,firefox... element.addEventListener(type,handler,false); } else if(element.attachEvent){ //IE element.attachEvent('on'+type,handler); }else{ //DOM 0级 element['on'+type]=handler; } }, //删除句柄 removeHandler:function(element,type,handler){ if (element.removeEventListener) { //DOM 2级 element.removeEventListener(type,handler,false); } else if(element.detachEvent){ //IE element.detachEvent('on'+type,handler); }else{ //DOM 0级 element['on'+type]=null; } }, //获取事件 getEvent:function(event){ return event?event:window.event; }, //获取事件类型 getType:function(event){ return event.type; }, //获取事件来源 getElement:function(event){ return event.srcElement||event.target; }, //阻止事件默认行为 preventDefault:function(event){ if (event.preventDefault) { event.preventDefault(); } else { event.returnValue=false; } }, //阻止事件冒泡 stopPropagation:function(event){ if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble=true; } } };
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解