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 ...
随机推荐
- Ajax 控件列表名称简介
ylbtech-ASP.NET AJAX: Ajax 控件列表名称简介 1.A,返回顶部 1) Accordion 可折叠的 2) AlwaysVisibleControl 始终可见控制 3) A ...
- MongoDB下载安装測试及使用
1.下载安装 64位:mongodb-win32-x86_64-enterprise-windows-64-2.6.4-signed.msi 余数为1的 db.collection.find({ &q ...
- 【Python】使用类和实例
Car类 class Car(): '''模拟汽车''' def __init__(self,name,model,year): '''初始化汽车的属性''' self.name = name sel ...
- 1BIT,1BYTE,1KB,1MB,1GB,1TB等计量单位换算
http://iask.sina.com.cn/b/8961090.html知识 在数字世界里没有电影.没有杂志.没有一首首的乐曲,只有一个个的数字“1”和“0”.以前人们对于数字世界中的这两个数 ...
- 2个YUV视频拼接技术
http://blog.csdn.net/huahuahailang/article/details/9040847 2个YUV视频拼接技术 http://zhongcong386.blog.163. ...
- Django--网页管理实例解析
此篇为代码流程的注释以及自己写的小项目的思路: 首先是项目的路由配置: urlpatterns = [ # url(r'^admin/', admin.site.urls), url(r'^yemia ...
- erlang的RSA签名与验签
1.RSA介绍 RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那时想要对 其乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥,即公钥,而 ...
- Erlang 在erlang项目中使用protobuf
protobuf是google的一个序列化框架,类似XML,JSON,其特点是基于二进制,比XML表示同样一段内容要短小得多,还可以定义一些可选字段,广泛用于服务端与客户端通信.文章将着重介绍在erl ...
- Docker入门系列7 动态映射端口port mapping
为何想要动态映射端口呢? 因为刚开始run启动容器时,并不知道里面需要映射哪些端口,等容器已创建了,想映射端口. 当然可以通过先commit成镜像,然后再次run时指定端口,但会生成中间的镜像,对于有 ...
- Ubuntu/CentOS下源码编译安装Php 5.6基本参数
先确认安装libxml2 apt-get install libxml2 libxml2-dev或者yum install libxml2 libxml2-dev ./configure --pref ...