javascript 跨浏览器事件处理
<div id="myDiv" style="width:100px; height:100px; border:1px solid #f00;"></div>
<script>
/**
* 跨浏览器事件处理
**/
var EventUtil = {
//添加事件
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on" + type] = handler;
}
},
//获取事件对象
getEvent:function(event){
return event ? event : window.event;
},
//获取元素对象
getTarget:function(event){
return event.target || event.srcElement;
},
//删除默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
//删除事件
removeHandler: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;s
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
//获取相关元素(mouseove和mouserout事件可能用的到)
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
};
/**
* 使用方法实例
**/
var myDiv = document.getElementById("myDiv");
//添加事件
EventUtil.addHandler(myDiv, 'click',addEventFun);
//删除事件
//EventUtil.removeHandler(myDiv, 'click', addEventFun);
function addEventFun(event){
//获取事件对象event
var eventName = EventUtil.getEvent(event);
console.log(eventName);
//获取元素对象
var elementTarget = EventUtil.getTarget(event);
console.log(elementTarget);
//删除默认事件
EventUtil.preventDefault(event);//比如a的href跳转
//阻止事件冒泡
EventUtil.stopPropagation(event);//比如body也有click事件,则不执行body的click }
</script>
javascript 跨浏览器事件处理的更多相关文章
- JavaScript跨浏览器事件处理
var EventUtil = { getEvent: function(event){ return event ? event : window.event; }, getTarget: func ...
- JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型
事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- JavaScript跨浏览器处理事件以及相关对象
主流的浏览器和IE浏览器在处理事件和事件对象上是有所区别的,我们一般会通过EventUtil进行封装,这样,就可以正常的跨浏览器处理事件了,本文的主要内容总结自<JavaScript高级程序设计 ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- Javascript跨浏览器的事件对象
一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...
- 封装常用的Javascript跨浏览器方法
var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListen ...
- javascript跨浏览器操作xml
//跨浏览器获取xmlDom function getXMLDOM(xmlStr) { var xmlDom = null; if (typeof window.DOMParser != 'undef ...
- 原生javascript跨浏览器常用事件处理
var eventUntil = { getEvent: function (event) {//获取事件 return event ? eve ...
随机推荐
- vps
vps是指虚拟专用服务器(Virtual Private Servers),等同于一台远程计算机,有独立的IP地址,全天24小时不关机,可以部署博客.应用.服务 ***简称SS,可以用来搭建FQ服务器 ...
- 关于Web应用和容器的指纹收集以及自动化软件的制作
一次对Web应用的渗透,九成都是从信息收集开始,所以信息收集就显得尤为重要.关键信息的收集可以使你在后期渗透的时候更加的得心应手,把渗透比喻成走黑暗迷宫的话,那信息收集可以帮你点亮迷宫的大部分地图. ...
- 九度oj题目&吉大考研10年机试题全解
吉大考研机试2010年题目 题目一(jobdu1478:三角形的边). http://ac.jobdu.com/problem.php?pid=1478 给出三个正整数,计算最小的数加上次小的数 ...
- 深入浅出AOP(四)--AOP的实现步骤
AOP是什么?有什么用处?怎么实现?在前面的博客中已经写的非常具体了,那么我们怎么一步一步考虑的呢? 在最初的时候,我们知道AOP是一个拦截业务.提供服务的东西.于是我们是这样做的: 后来又了加上了S ...
- ps快捷键记录
alt+delete 前景色填充 ctrl+delete 背景色填充 alt+shift+鼠标调节 变换选取,做圆环 ctrl+t 自由变换 alt+鼠标拖动 快捷复制某区域 delete ...
- Android UI开发神兵利器之Icon
好的设计离不开Icon 话不多.介绍2个国外的站点,一个用来找Icon,一个用来搞页面设计 http://dryicons.com/free-icons/ http://www.webdesignsh ...
- leetCode 95.Unique Binary Search Trees II (唯一二叉搜索树) 解题思路和方法
Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...
- 对Oracle的rownum生成时机的理解
在Oracle中,rownum和rowid是平时经常用到的.比如rownum经常用于分页查询,rowid用于排重或者快速定位到记录. 对rownum跟order by配合下的生成时机一直没有具体研究过 ...
- vs2013数据库连接对应的dll
mysql for visual studio 1.1.1mysql connector net 6.3.9mysql connector/odbc 5.3
- 模拟struts2
利用到的技术:dom4j和xpath 自己写一个Filter 在doFilter中拦截请求 // 2.1 得到请求资源路径 String uri = request.getReq ...