软件开发培训班 >> 编程开发 >> JavaScript

javascript打造跨浏览器事件处理机制[Blue-Dream出品]

　　本文标签：跨浏览器,事件处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> Event Test UseCase </title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<div id="odiv" style="width:200px;height:100px;background-color:red; text-align:center">测试文本</div> 
</body> 
<script> 
var isHostMethod = function (object, methodName) { 
var t = typeof object[methodName]; 
return ((t === function || t === object) && !!object[methodName]) || t === unknown; 
}; 
var addListener, removeListener, 
/* test element */ 
docEl = document.documentElement; 
if (isHostMethod(docEl, addEventListener)) { 
addListener = function (element, eventName, handler) { 
element.addEventListener(eventName, handler, false); 
}; 
} 
else if (isHostMethod(docEl, attachEvent)) { 
addListener = function (element, eventName, handler) { 
element.attachEvent(on + eventName, function () { 
handler.call(element, window.event); 
}); 
}; 
} 
else { 
addListener = function (element, eventName, handler) { 
element[on + eventName] = handler; 
}; 
} 
if (isHostMethod(docEl, removeEventListener)) { 
removeListener = function (element, eventName, handler) { 
element.removeEventListener(eventName, handler, false); 
}; 
} 
else if (isHostMethod(docEl, detachEvent)) { 
removeListener = function (element, eventName, handler) { 
element.detachEvent(on + eventName, handler); 
}; 
} 
else { 
removeListener = function (element, eventName, handler) { 
element[on + eventName] = null; 
}; 
}

// Test UseCase 
var o = document.getElementById(odiv); 
addListener(o, click, function(event) { 
this.style.backgroundColor = blue; 
alert((event.target || event.srcElement).innerHTML); 
}); 
</script> 
</html>

技术文章快速查找

关于jQuery $.isNumeric vs. $.isNaN vs. isNaN

英文首字母全大写的js实现脚本

传智播客学习之JavaScript基础篇

jquery 获取自定义属性(attr和prop)的实现代码

JQuery each()函数如何优化循环DOM结构的性能

img onload事件绑定各浏览器均可执行

javascript的闭包介绍(司徒正美)

javascript基础知识整理

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建