javascript 兼容所有浏览器的DOM扩展功能
发布时间:2024-04-16 09:52:04
今天周五,很闲,坐在电脑前没什么事可做,产品线的人也没提什么新的需求,可能下周会有新的需求和工作安排,但那是下周的事了。今天就想写点技术的东西,也就当作是记记笔记,本人水平有限,希望大家多多指教,嘴下留情,哈哈。
有时候我们会想扩展DOM元素的功能,可以添加一些自定义的方法,以让它用起来更加灵活、方便;先来举个例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
var tagA=document.getElementById("tagA");
tagA.onclick=function(){
alert(this.innerHTML);
}
//-->
</script>
</body>
</html>
毫无疑问,从以上代码可以看出,当点击A标签的时候会弹出“你好”,tagA是一个DOM元素,除了有onclick事件以外,还有onmouseover,onmouseout,onmousemove等等,而这些事件都是DOM元素本身就具有的;但现在我们希望对它进行扩展,例如可以让它支持tagA.bind,我可以用tagA.bind("click",function(){}),来代替tagA.onclick=function(){}。OK,现在的目的很明确,先看下面的代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>
以上这段代码就是功能扩展后的最终效果,它与上一段代码实现的功能是一样的,但现在它还不能执行,要进行扩展后才可以,在此之前先来看一些基础知识,这很重要,因为等下会用到:
1、HTMLElement,在DOM标准中,每个元素都继承自HTMLElement,而HTMLElement又继承自Element,Element又继承自Node;于是我们可以使用HTMLElement的Prototype来扩展HTML元素的方法和属性,如何实现?我们来看一段代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
HTMLElement.prototype.Alert=function(){
alert("这是一个扩展方法");
}
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
以上代码在页面加载的时候就弹出“这是一个扩展方法”,不过相信你已经注意到了,在IE6,7,8里面会出错,但在IE9以上或者Chrome,Firefox,Opera这些浏览器里面都能正常运行,这是兼容性问题,不用担心,后面会解决。
以上的代码灵活性不够好,我们优化一下,让它更加灵活:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展
}
function Alert(){
alert("这是一个扩展方法");
}
DOMExtend("Alert",Alert);
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
从以上代码可以看出,有了DOMExtend这个方法以后,我们就可以通过传入不用的name 和 fn 实现不同的扩展。
2、以上讲完了HTMLElement,接下来讲讲事件的绑定,很多人都知道,IE和其他浏览器的事件绑定方式不一样,实现兼容所有浏览器的事件绑定的代码如下:
function BindEvent(elem,event,fun){
if(elem.addEventListener){
elem.addEventListener(event,fun,false);
}
else{
elem.attachEvent("on"+event,fun);
}
}
以下是事件绑定的使用例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function BindEvent(elem,event,fun){
if(elem.addEventListener){
elem.addEventListener(event,fun,false);
}
else{
elem.attachEvent("on"+event,fun);
}
}
var tagA=document.getElementById("tagA");
function Alert(){
alert("这是事件绑定");
}
BindEvent(tagA,"click",Alert);
//-->
</script>
</body>
</html>
以上代码运行后,点击“你好”就会弹出“这是事件绑定”,这里值得一提的就是addEvenListener的第三个参数,这里的值是false,意思是取消Capture方式而采用冒泡方式。标准的事件有两种触发方式,一种是捕获型(caputre),另一种是冒泡型;而IE只支持冒泡型。捕获型的特点是触发方式是从外到内的方式触发事件,而冒泡型就是从内到外的方式触发事件,假设以上代码的A元素外层包了一个DIV元素,如果A元素与它的父元素DIV都有一个onclick事件,那么冒泡型就是点击A的时候会先触发A的事件,然后再触发DIV的事件,反之就是捕获型。
OK,相信通过以上的分析,对HTMLElement扩展和事件绑定都有了相当的了解,结合这两个知识点,我们可以写出如下的代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展
}
function BindEvent(event,fun){
if(this.addEventListener){//执行完DOMExtend后,这里的this会指向HTMLElement
this.addEventListener(event,fun,false);//标准的事件绑定
}
else{
this.attachEvent("on"+event,fun);//IE的事件绑定
}
}
DOMExtend("bind",BindEvent);//执行功能扩展
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){//这就是我们最终要实现的功能
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>
执行以上这个页面,在IE9,Chrome,Opera,Firefox等标准浏览器里都能正常触发tagA的点击事件,于是现在只剩下一个问题,就是要兼容其他浏览器;IE浏览器之所以出错,是因为它们隐藏了对HTMLElement的访问,于是针对IE浏览器,我们就不能用HTMLElement.prototype来进行扩展了,但我们可以通过重写以下几个函数来达到目的:
document.getElementById
document.getElementsByTagName
document.createElement
document.documentElement
document.body
(PS:记忆中获取DOM元素好像就是以上这些方法了~不知道还有没有其他)
重写后,再进行一些处理变换就可以得到以下完整的页面代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
function DOMExtend(name, fn){
if(typeof(HTMLElement)!="undefined"){
eval("HTMLElement.prototype."+name+"="+fn);
}
else{
var _getElementById=document.getElementById;
document.getElementById=function(id){
var _elem=_getElementById(id);
eval("_elem."+name+"="+fn);
return _elem;
}
var _getElementByTagName=document.getElementsByTagName;
document.getElementsByTagName=function(tag){
var _elem=_getElementByTagName(tag);
var len=_elem.length;
for(var i=0;i<len;i++){
eval("_elem["+i+"]."+name+"="+fn);
}
return _elem;
}
var _createElement=document.createElement;
document.createElement=function(tag){
var _elem=_createElement(tag);
eval("_elem."+name+"="+fn);
return _elem;
}
var _documentElement=document.documentElement;
eval("_documentElement."+name+"="+fn);
var _documentBody=document.body;
eval("_documentBody."+name+"="+fn);
}
}
function BindEvent(event,fun){
if(this.addEventListener){
this.addEventListener(event,fun,false);
}
else{
this.attachEvent("on"+event,fun);
}
}
DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");
wrap.bind("click",function(){
alert(this.innerHTML);
})
</script>
</body>
</html>
OK,目前为止已经解决了兼容性问题,这是所有浏览器都能顺利通过的DOM元素扩展的代码,但是这样还有一个小问题,细心的人会发现在IE浏览器里面弹出的结果是"undefined",而不是"你好";问题的原因在于IE的事件绑定上,看以上代码,当调用alert(this.innerHTML)的时候,由于IE绑定事件用的是attachEvent,这时候this指向的是windows,于是现在的目标的要改变this指向的对像,将this指向tagA。于是经过修改,完整代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
function DOMExtend(name, fn){
if(typeof(HTMLElement)!="undefined"){
eval("HTMLElement.prototype."+name+"="+fn);
}
else{
var _getElementById=document.getElementById;
document.getElementById=function(id){
var _elem=_getElementById(id);
eval("_elem."+name+"="+fn);
return _elem;
}
var _getElementByTagName=document.getElementsByTagName;
document.getElementsByTagName=function(tag){
var _elem=_getElementByTagName(tag);
var len=_elem.length;
for(var i=0;i<len;i++){
eval("_elem["+i+"]."+name+"="+fn);
}
return _elem;
}
var _createElement=document.createElement;
document.createElement=function(tag){
var _elem=_createElement(tag);
eval("_elem."+name+"="+fn);
return _elem;
}
var _documentElement=document.documentElement;
eval("_documentElement."+name+"="+fn);
var _documentBody=document.body;
eval("_documentBody."+name+"="+fn);
}
}
function BindEvent(event,fun){
if(this.addEventListener){
this.addEventListener(event,fun,false);
}
else{
var tag=this;
tag.attachEvent("on"+event,function(){
fun.apply(tag,arguments);//这里是关键
});
}
}
DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");
wrap.bind("click",function(){
alert(this.innerHTML);
})
</script>
</body>
</html>
猜你喜欢
- 近期,一直在研究MySQL数据库,经常修改配置文件,导致MySQL数据库无法使用,不得不反复重装MySQL数据库。以下是在Windows7
- 个人使用环境WIN10x64系统,Python3.8,PyCharm2020.01.03安装过程一、安装Python3.8(自己参考其他教程
- 本文实例讲述了python将文本转换成图片输出的方法。分享给大家供大家参考。具体实现方法如下:#-*- coding:utf-8 -*-fr
- 本文实例讲述了PHP实现对图片的反色处理功能。分享给大家供大家参考,具体如下:今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行
- <style type="text/css"> <!-- body,td,th {
- 问题:每次打开pycharm打开py文件光标都是insert模式, 像下面图片那样解决方案:讲Tools里面的Vim Emulator勾选去
- 在一群里有朋友发问,有时间,也就看看了,不多说了,看图了:用一般的 select .... order 排序出来,就如下图了,是
- 如下所示:import numpya = numpy.array(([3,2,1],[2,5,7],[4,7,8]))itemindex =
- 前言Iframe 是一种将网页嵌入到另一个页面的内容中的方法。这是通过使用 HTML 元素、外部网站的 URL 以及窗口在您的网站上的外观参
- 内容摘要:本文介绍了使用CSS结合javascript来实现对超链接的类型进行标注,让浏览者明确是zip,doc,pdf或其它格式的文件。这
- 本文实例对比分析了python中lambda与def的用法。分享给大家供大家参考。具体分析如下:1、lambda用来创建匿名函数,不同于de
- 前言本文将深入研究 preg_replace /e 模式下的代码执行问题,其中包括 preg_replace 函数的执行过程分析、正则表达式
- MySQL服务器有几个影响其操作的参数(变量)。如果缺省的参数值不合适,可以将其修改为对服务器运行环境更合适的值。例如,如果您有大量的内存,
- 检测文件夹,拷贝有更新的文件到对应目录 2016.5.19亲测可用,若有借鉴请修改下文件路径;学习python小一个月后写的这个功能,属于初
- 今天摸了半天摸出来的,虽然这里没啥人玩ASP,不过也是win7的问题,发发当备份问题1.An error occurre
- 在上一篇Python接口自动化测试系列文章:Python接口自动化浅析yaml配置文件原理及用法,主要介绍主要介绍yaml语法、yaml存储
- SQL Server2005扩展函数已经不是一件什么新鲜的事了,但是我看网上的大部分都是说聚合函数,例子也比较浅,那么这里就讲讲我运用扩展函
- 1、Dreamweaver中的复制我在网页中复制的文字,粘贴到Dreamweaver中时,它总是带有原来网页的格式,请问如何只复制其中的文本
- 推荐使用 Homebrew 来安装第三方工具。自己安装的python散落在电脑各处,删除起来比较麻烦。今天在此记录一下删除的过程(本人以Py
- 本文实例总结了常用SQL语句优化技巧。分享给大家供大家参考,具体如下:除了建立索引之外,保持良好的SQL语句编写习惯将会降低SQL性能问题发