JavaScript事件兼容性写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo">
<a>点击我将获得节点1</a>
<a>点击我将获得节点2</a>
</p>
<script type="text/javascript">
// event(事件)工具集
eventUntil = {
// 页面加载完成后
// 主要是原生JS，页面只能加载一次window.onload；这里使用该方法可以绑定多个方法。
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 下面的顺序：标准dom2，IE dom2， dom
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();// 标准w3c
} else {
ev.cancelBubble = true;// IE
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();// 标准w3c
} else {
event.returnValue = false;// IE
}
},
// 获取事件目标
getTarget : function(event) {
// 标准W3C 和 IE
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
}; eventUntil.readyEvent(function(){
console.log("相比于window.onload可以绑定多个 按顺序执行。");
})
eventUntil.addEvent(document.getElementById("demo") , "click" , function(){
alert("我点击了p元素")
}) </script>
</body>
</html>
JavaScript事件兼容性写法的更多相关文章
- JavaScript 事件兼容性写法
1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...
- dom2级事件兼容性写法
添加事件 function addEvent(node,type,hander){ if(!node) return false; //如果没有这个元素 ,直接返回: if(node.addE ...
- javascript 浏览器兼容性写法
var event = window.event || arguments.callee.caller.arguments[0]; // 获取event对象 event = event.srcElem ...
- JavaScript 事件(捕获和冒泡 兼容性写法)
事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...
- javascript的自定义对象/取消事件/事件兼容性/取消冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- Javascript selection的兼容性写法介绍
本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...
- JavaScript数组方法的兼容性写法 汇总：indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法
<a name="target" href="#">链接</a> <p id="target">文字说明 ...
随机推荐
- 04: gitlab安装与使用
1.1 gitlab安装(192.168.56.12中安装) 1.GitLab是什么? 1. GitLab实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目. 2. GitLa ...
- deepin 15.10.1 GTX1060 NVIDIA 驱动安装，双屏显示问题记录
有一段时间没有用Linux了.由于买了个4k的戴尔显示屏,在deepin系统上无法用,从昨晚到现在,总于解决了我的问题! 问题1:无法直接在深度的显卡驱动管理器哪里直接切换,网上看到很多人都有这个问题 ...
- cube-ui indexList的正确使用
demo地址:https://github.com/zphtown/cube-ui-bug 上拉和下拉核心代码: onPullingDown () { this.isNoMore = false th ...
- spring-boot 启动图标修改-启动彩蛋
spring boot启动总会显示这样的图标,但是我想不一样 到网上找了一圈,恩,找到一个不错的,做个记录 首先我们在resource目录下面放入一个banner.txt文件,Spring Boot启 ...
- 抗D十招：十个方法完美解决DDoS攻击防御难题
可以说,DDoS是目前最凶猛.最难防御的网络攻击之一.现实情况是,这个世界级难题还没有完美的.彻底的解决办法,但采取适当的措施以降低攻击带来的影响.减少损失是十分必要的.将DDoS防御作为整体安全策略 ...
- signal,blinker：信号（看我脸色行事）
signal 什么是信号(signal)? 信号在linux中被用来进行进程间的通信和异步处理,简单地可以理解会为回调函数,当发送一个信号时,会触发相应的操作.python中的signal模块便是用来 ...
- Go语言标准库之fmt.Print
Go语言fmt.Printf使用指南 本文整理了Go语言的标准输出流(fmt.Printf)在打印到屏幕时的格式化输出操作. 在这里按照占位符将被替换的变量类型划分,更方便查询和记忆. General ...
- centos7 Keepalived + Haproxy + MySQL pxc5.6
拓扑图 应用通过 VIP 连接到 Haproxy,Haproxy 通过http代理分发请求到后端 3 台 MySQL pxc. Keepalived 可以有效防止 Haproxy 单点故障. MySQ ...
- 【bzoj2523】【CTSC2001】聪明的学生
真是神仙题,做完后感觉智商提(jiang)升(di)了 这种题一般都是把局面设成状态,然后发现可以由一种状态转移到另一种状态,那就是 $dp$ 了. 但是这道题怎么设呢? 题目中给了你一个结论,一般题 ...
- Device Tree（一）：背景介绍 转
作者:linuxer 发布于:2014-5-22 16:46 分类:统一设备模型 一.前言 作为一个多年耕耘在linux 2.6.23内核的开发者,各个不同项目中各种不同周边外设驱动的开发以及各种琐碎 ...