1、以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器。包括IE6(亲测)

<!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 事件兼容性写法的更多相关文章

  1. JavaScript事件兼容性写法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. dom2级事件兼容性写法

    添加事件 function addEvent(node,type,hander){ if(!node) return false;     //如果没有这个元素 ,直接返回: if(node.addE ...

  3. javascript 浏览器兼容性写法

    var event = window.event || arguments.callee.caller.arguments[0]; // 获取event对象 event = event.srcElem ...

  4. JavaScript 事件(捕获和冒泡 兼容性写法)

    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...

  5. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  7. Javascript selection的兼容性写法介绍

    本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...

  8. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  9. javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

    <a name="target" href="#">链接</a> <p id="target">文字说明 ...

随机推荐

  1. 图片滚动插件jquery bxslider

    https://www.cnblogs.com/axl234/p/4167196.html

  2. apache 压缩 gzip

    配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...

  3. Educational Codeforces Round 3 C

    C. Load Balancing time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. pm2 启动后台 node js

    1,安装node js 参看:https://www.cnblogs.com/wf-l5201314/p/9229974.html 2,pm2安装(安装环境linux / os) 命令:npm ins ...

  5. DJ

    必知必会13条 all():查询所有结果 filter(**kwargs)   过滤,取到符合条件的对象,比get方法好,找不到会返回空 get(**kwargs)      取到符合条件对象,对象有 ...

  6. sqlserver 数据库表分区

    参考文档 https://msdn.microsoft.com/zh-cn/library/ms345146(SQL.90).aspx http://blog.sina.com.cn/s/blog_4 ...

  7. zookeeper崩溃修复

    cat /etc/zookeeper/conf/zoo.cfg 找到dataDir=/var/lib/zookeeper 切换到路径/var/lib/zookeeper cd /var/lib/zoo ...

  8. Jenkins未授权访问脚本执行漏洞

    Jenkins未授权访问脚本执行漏洞 步骤 首先找一个站点挂上一个反弹shell脚本,然后在脚本执行框里执行脚本进行下载到tmp目录: println "wget http://47.95. ...

  9. mc02_配置本地git仓库并上传到github

    注册github账号 仔细阅读使用说明便可,这里提一下如何删除一个repository. 点击要删除的repository,打开后点击Settings 然后滚动到页面最下方,点击最后一个按钮 在弹出框 ...

  10. 文献综述一:基于UML技术的商品管理系统设计与实现

    一.基本信息 标题:基于UML技术的商品管理系统设计与实现 时间:2018 出版源:福建电脑 文件分类:uml技术的研究 二.研究背景 使用 UML 技术对商品管理系统进行了分析与研究,使用户对商品信 ...