JS-DOM2级事件对象跨浏览器处理（已封装）
var eventUill = {
//添加事件
addHander: 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;
}
},
//移除事件
removeHander: 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] = handler;
}
},
//获取到拥有这个事件的标签名称——事件对象（如input）
getEvent: function(event){
return event?event:window.event;//注意：返回后需要调用。可配合nodeName，来单独获取到标签的名字。
},
//获取事件的类型
getType: function(event){
return event.type;//注意：返回后需要调用。
},
//获取事件来自于哪个元素
getElement: function(event){
return event.target || event.srcElement;
},
//阻止、取消事件的默认行为/属性发生
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = null;
}
},
//阻止冒泡行为
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}
DOM2级事件对象的跨浏览器处理——js源码
遇到的小bug总结：
- 封装的库根本找不到，颜色都是灰的，说明代码是错的，通过在js中添加了一个var eventUill = {}，建立了一个对象，html这里调用对象的addHander,
- eventUill找不到，发现，引用外部库的js代码写在来调用库中函数的下边，根据文档流的优先级，说明还没有调出eventUill之前就执行函数了所以出错。那就把调用的外部库写到最上面，让他优先调用。
- addEventLister不对，把ele改成了element，是不是以后写，这里也必须写element呢？全部改成element后变绿了，代码正确。
- 说element为空。那么element接受传过来的参数是空的，但是html中的btn处是没有问题的，我getElementById的代码也没有错。看来是老毛病又犯了。js写在html上面，获取id为btn的按钮，根据文档流，他还没有读到input的时候就去获取，你让他去哪里获取。找不到btn，自然传过去的是undefined。紧接着element就成null了。解决就是加上window。onload=function(所有的js代码)调用id的代码写到html的下边。这也是js习惯上要放到body的后边的理由。
以下是测试时的html文件，DOM2级事件-跨浏览器处理.js就是上面的js源码。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>dom2级事件跨浏览器处理-封装库</title>
<script src="DOM2级事件-跨浏览器处理.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
eventUill.addHander(btn, 'click', function() {
alert('点击后通过封装的库辗转调用了这个匿名函数');
alert(eventUill.getEvent(btn).nodeName);
alert(eventUill.getElement(btn));
});
}
</script> </head> <body>
<input type="button" value="点击" id="btn" />
</body> </html>
html
JS-DOM2级事件对象跨浏览器处理（已封装）的更多相关文章
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
- JS事件委托（事件代理，dom2级事件）
一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- js笔记19 事件对象
1.常用的事件 onmouseover onmouseout onmousedown onmousemove onmouseup onclick onchange onfocus o ...
- js事件处理、事件对象
事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- 2015-03-12——简析DOM2级事件
DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load 适用于windo ...
- DOM0、DOM2级事件
JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...
随机推荐
- 构造函数的return返回值
3 1. 2. 3.
- mysql 根据字段重复 删除 保留一条
delete from TableName where id not in (select minid from (select min(id) as minid from TableName gro ...
- 如何删除GIT中的.DS_Store
.DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...
- Android下常见的四种对话框
摘要:在实际开发过程有时为了能够和用户进行很好的交互,需要使用到对话框,在Android中常用的对话框有四种:普通对话框.单选对话框.多选对话框.进度对话框. 一.普度对话框 public void ...
- 献给那些每次调试时都要启动很多WEB项目的苦逼程序猿
当一个解决方案包含多个WEB项目的时候,只要按F5调试,其它用不着的WEB项目也会自动添加到托盘里.很多新手都不知道如何解决这个问题,我也是刚知道. 在网上找了很多资料看到有2种解决方法: 1.把WE ...
- javascript生成GUID的代码
<script type="text/javascript"> var Guid = function(){}; Guid.prototype = { S4:funct ...
- Percona 开始尝试基于Ceph做上层感知的分布式 MySQL 集群，使用 Ceph 提供的快照，备份和 HA 功能来解决分布式数据库的底层存储问题
本文由 Ceph 中国社区 -QiYu 翻译 英文出处:Using Ceph with MySQL 欢迎加入CCTG Over the last year, the Ceph world drew m ...
- zabbix 监控MySQL
现在我来说一下我的监控环境 zabbix-3.0.3 MySQL-5.6.23 1.首先我们要登录MySQL,创建一个监控MySQL的用户 GRANT USAGE,PROCESS,SUPER,REPL ...
- HttpModule与HttpHandler详解
ASP.NET对请求处理的过程:当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给 ASPNET_ISAPI.dll,A ...
- MathType给公式加三角着重号的方法
MathType是一款出色的数学公式编辑器,不仅可以兼容word,还与PPT也兼容.它也可以在PPT中编辑出非常漂亮的公式,再加上PPT本身所具有的动画.颜色.显示等功能,在演示数学公式时非常的精美. ...