javascript 兼容所有瀏覽器的DOM擴(kuò)展功能
更新時(shí)間:2012年08月01日 23:02:43 作者:
技術(shù)文章寫得少,所以有時(shí)候想寫點(diǎn)什么卻下不了手,不知道該寫什么;往往到了準(zhǔn)備要寫的時(shí)候才發(fā)現(xiàn)自己想寫的東西其實(shí)很無(wú)聊,甚至覺(jué)得很幼稚,于是又關(guān)掉了編緝器
今天周五,很閑,坐在電腦前沒(méi)什么事可做,產(chǎn)品線的人也沒(méi)提什么新的需求,可能下周會(huì)有新的需求和工作安排,但那是下周的事了。今天就想寫點(diǎn)技術(shù)的東西,也就當(dāng)作是記記筆記,本人水平有限,希望大家多多指教,嘴下留情,哈哈。
有時(shí)候我們會(huì)想擴(kuò)展DOM元素的功能,可以添加一些自定義的方法,以讓它用起來(lái)更加靈活、方便;先來(lái)舉個(gè)例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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>
毫無(wú)疑問(wèn),從以上代碼可以看出,當(dāng)點(diǎn)擊A標(biāo)簽的時(shí)候會(huì)彈出“你好”,tagA是一個(gè)DOM元素,除了有onclick事件以外,還有onmouseover,onmouseout,onmousemove等等,而這些事件都是DOM元素本身就具有的;但現(xiàn)在我們希望對(duì)它進(jìn)行擴(kuò)展,例如可以讓它支持tagA.bind,我可以用tagA.bind("click",function(){}),來(lái)代替tagA.onclick=function(){}。OK,現(xiàn)在的目的很明確,先看下面的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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>
以上這段代碼就是功能擴(kuò)展后的最終效果,它與上一段代碼實(shí)現(xiàn)的功能是一樣的,但現(xiàn)在它還不能執(zhí)行,要進(jìn)行擴(kuò)展后才可以,在此之前先來(lái)看一些基礎(chǔ)知識(shí),這很重要,因?yàn)榈认聲?huì)用到:
1、HTMLElement,在DOM標(biāo)準(zhǔn)中,每個(gè)元素都繼承自HTMLElement,而HTMLElement又繼承自Element,Element又繼承自Node;于是我們可以使用HTMLElement的Prototype來(lái)擴(kuò)展HTML元素的方法和屬性,如何實(shí)現(xiàn)?我們來(lái)看一段代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
HTMLElement.prototype.Alert=function(){
alert("這是一個(gè)擴(kuò)展方法");
}
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
以上代碼在頁(yè)面加載的時(shí)候就彈出“這是一個(gè)擴(kuò)展方法”,不過(guò)相信你已經(jīng)注意到了,在IE6,7,8里面會(huì)出錯(cuò),但在IE9以上或者Chrome,Firefox,Opera這些瀏覽器里面都能正常運(yùn)行,這是兼容性問(wèn)題,不用擔(dān)心,后面會(huì)解決。
以上的代碼靈活性不夠好,我們優(yōu)化一下,讓它更加靈活:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動(dòng)態(tài)擴(kuò)展
}
function Alert(){
alert("這是一個(gè)擴(kuò)展方法");
}
DOMExtend("Alert",Alert);
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
從以上代碼可以看出,有了DOMExtend這個(gè)方法以后,我們就可以通過(guò)傳入不用的name 和 fn 實(shí)現(xiàn)不同的擴(kuò)展。
2、以上講完了HTMLElement,接下來(lái)講講事件的綁定,很多人都知道,IE和其他瀏覽器的事件綁定方式不一樣,實(shí)現(xiàn)兼容所有瀏覽器的事件綁定的代碼如下:
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功能擴(kuò)展</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>
以上代碼運(yùn)行后,點(diǎn)擊“你好”就會(huì)彈出“這是事件綁定”,這里值得一提的就是addEvenListener的第三個(gè)參數(shù),這里的值是false,意思是取消Capture方式而采用冒泡方式。標(biāo)準(zhǔn)的事件有兩種觸發(fā)方式,一種是捕獲型(caputre),另一種是冒泡型;而IE只支持冒泡型。捕獲型的特點(diǎn)是觸發(fā)方式是從外到內(nèi)的方式觸發(fā)事件,而冒泡型就是從內(nèi)到外的方式觸發(fā)事件,假設(shè)以上代碼的A元素外層包了一個(gè)DIV元素,如果A元素與它的父元素DIV都有一個(gè)onclick事件,那么冒泡型就是點(diǎn)擊A的時(shí)候會(huì)先觸發(fā)A的事件,然后再觸發(fā)DIV的事件,反之就是捕獲型。
OK,相信通過(guò)以上的分析,對(duì)HTMLElement擴(kuò)展和事件綁定都有了相當(dāng)?shù)牧私?,結(jié)合這兩個(gè)知識(shí)點(diǎn),我們可以寫出如下的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動(dòng)態(tài)擴(kuò)展
}
function BindEvent(event,fun){
if(this.addEventListener){//執(zhí)行完DOMExtend后,這里的this會(huì)指向HTMLElement
this.addEventListener(event,fun,false);//標(biāo)準(zhǔn)的事件綁定
}
else{
this.attachEvent("on"+event,fun);//IE的事件綁定
}
}
DOMExtend("bind",BindEvent);//執(zhí)行功能擴(kuò)展
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){//這就是我們最終要實(shí)現(xiàn)的功能
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>
執(zhí)行以上這個(gè)頁(yè)面,在IE9,Chrome,Opera,Firefox等標(biāo)準(zhǔn)瀏覽器里都能正常觸發(fā)tagA的點(diǎn)擊事件,于是現(xiàn)在只剩下一個(gè)問(wèn)題,就是要兼容其他瀏覽器;IE瀏覽器之所以出錯(cuò),是因?yàn)樗鼈冸[藏了對(duì)HTMLElement的訪問(wèn),于是針對(duì)IE瀏覽器,我們就不能用HTMLElement.prototype來(lái)進(jìn)行擴(kuò)展了,但我們可以通過(guò)重寫以下幾個(gè)函數(shù)來(lái)達(dá)到目的:
document.getElementById
document.getElementsByTagName
document.createElement
document.documentElement
document.body
?。≒S:記憶中獲取DOM元素好像就是以上這些方法了~不知道還有沒(méi)有其他)
重寫后,再進(jìn)行一些處理變換就可以得到以下完整的頁(yè)面代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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,目前為止已經(jīng)解決了兼容性問(wèn)題,這是所有瀏覽器都能順利通過(guò)的DOM元素?cái)U(kuò)展的代碼,但是這樣還有一個(gè)小問(wèn)題,細(xì)心的人會(huì)發(fā)現(xiàn)在IE瀏覽器里面彈出的結(jié)果是"undefined",而不是"你好";問(wèn)題的原因在于IE的事件綁定上,看以上代碼,當(dāng)調(diào)用alert(this.innerHTML)的時(shí)候,由于IE綁定事件用的是attachEvent,這時(shí)候this指向的是windows,于是現(xiàn)在的目標(biāo)的要改變this指向的對(duì)像,將this指向tagA。于是經(jīng)過(guò)修改,完整代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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);//這里是關(guān)鍵
});
}
}
DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");
wrap.bind("click",function(){
alert(this.innerHTML);
})
</script>
</body>
</html>
有時(shí)候我們會(huì)想擴(kuò)展DOM元素的功能,可以添加一些自定義的方法,以讓它用起來(lái)更加靈活、方便;先來(lái)舉個(gè)例子:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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>
毫無(wú)疑問(wèn),從以上代碼可以看出,當(dāng)點(diǎn)擊A標(biāo)簽的時(shí)候會(huì)彈出“你好”,tagA是一個(gè)DOM元素,除了有onclick事件以外,還有onmouseover,onmouseout,onmousemove等等,而這些事件都是DOM元素本身就具有的;但現(xiàn)在我們希望對(duì)它進(jìn)行擴(kuò)展,例如可以讓它支持tagA.bind,我可以用tagA.bind("click",function(){}),來(lái)代替tagA.onclick=function(){}。OK,現(xiàn)在的目的很明確,先看下面的代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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>
以上這段代碼就是功能擴(kuò)展后的最終效果,它與上一段代碼實(shí)現(xiàn)的功能是一樣的,但現(xiàn)在它還不能執(zhí)行,要進(jìn)行擴(kuò)展后才可以,在此之前先來(lái)看一些基礎(chǔ)知識(shí),這很重要,因?yàn)榈认聲?huì)用到:
1、HTMLElement,在DOM標(biāo)準(zhǔn)中,每個(gè)元素都繼承自HTMLElement,而HTMLElement又繼承自Element,Element又繼承自Node;于是我們可以使用HTMLElement的Prototype來(lái)擴(kuò)展HTML元素的方法和屬性,如何實(shí)現(xiàn)?我們來(lái)看一段代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
HTMLElement.prototype.Alert=function(){
alert("這是一個(gè)擴(kuò)展方法");
}
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
以上代碼在頁(yè)面加載的時(shí)候就彈出“這是一個(gè)擴(kuò)展方法”,不過(guò)相信你已經(jīng)注意到了,在IE6,7,8里面會(huì)出錯(cuò),但在IE9以上或者Chrome,Firefox,Opera這些瀏覽器里面都能正常運(yùn)行,這是兼容性問(wèn)題,不用擔(dān)心,后面會(huì)解決。
以上的代碼靈活性不夠好,我們優(yōu)化一下,讓它更加靈活:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動(dòng)態(tài)擴(kuò)展
}
function Alert(){
alert("這是一個(gè)擴(kuò)展方法");
}
DOMExtend("Alert",Alert);
var tagA=document.getElementById("tagA");
tagA.Alert();
//-->
</script>
</body>
</html>
從以上代碼可以看出,有了DOMExtend這個(gè)方法以后,我們就可以通過(guò)傳入不用的name 和 fn 實(shí)現(xiàn)不同的擴(kuò)展。
2、以上講完了HTMLElement,接下來(lái)講講事件的綁定,很多人都知道,IE和其他瀏覽器的事件綁定方式不一樣,實(shí)現(xiàn)兼容所有瀏覽器的事件綁定的代碼如下:
復(fù)制代碼 代碼如下:
function BindEvent(elem,event,fun){
if(elem.addEventListener){
elem.addEventListener(event,fun,false);
}
else{
elem.attachEvent("on"+event,fun);
}
}
以下是事件綁定的使用例子:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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>
以上代碼運(yùn)行后,點(diǎn)擊“你好”就會(huì)彈出“這是事件綁定”,這里值得一提的就是addEvenListener的第三個(gè)參數(shù),這里的值是false,意思是取消Capture方式而采用冒泡方式。標(biāo)準(zhǔn)的事件有兩種觸發(fā)方式,一種是捕獲型(caputre),另一種是冒泡型;而IE只支持冒泡型。捕獲型的特點(diǎn)是觸發(fā)方式是從外到內(nèi)的方式觸發(fā)事件,而冒泡型就是從內(nèi)到外的方式觸發(fā)事件,假設(shè)以上代碼的A元素外層包了一個(gè)DIV元素,如果A元素與它的父元素DIV都有一個(gè)onclick事件,那么冒泡型就是點(diǎn)擊A的時(shí)候會(huì)先觸發(fā)A的事件,然后再觸發(fā)DIV的事件,反之就是捕獲型。
OK,相信通過(guò)以上的分析,對(duì)HTMLElement擴(kuò)展和事件綁定都有了相當(dāng)?shù)牧私?,結(jié)合這兩個(gè)知識(shí)點(diǎn),我們可以寫出如下的代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</title>
</head>
<body>
<a href="javascript:void(0)" id="tagA">你好</a>
<script type="text/javascript">
<!--
function DOMExtend(name,fn){
eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動(dòng)態(tài)擴(kuò)展
}
function BindEvent(event,fun){
if(this.addEventListener){//執(zhí)行完DOMExtend后,這里的this會(huì)指向HTMLElement
this.addEventListener(event,fun,false);//標(biāo)準(zhǔn)的事件綁定
}
else{
this.attachEvent("on"+event,fun);//IE的事件綁定
}
}
DOMExtend("bind",BindEvent);//執(zhí)行功能擴(kuò)展
var tagA=document.getElementById("tagA");
tagA.bind("click",function(){//這就是我們最終要實(shí)現(xiàn)的功能
alert(this.innerHTML);
})
//-->
</script>
</body>
</html>
執(zhí)行以上這個(gè)頁(yè)面,在IE9,Chrome,Opera,Firefox等標(biāo)準(zhǔn)瀏覽器里都能正常觸發(fā)tagA的點(diǎn)擊事件,于是現(xiàn)在只剩下一個(gè)問(wèn)題,就是要兼容其他瀏覽器;IE瀏覽器之所以出錯(cuò),是因?yàn)樗鼈冸[藏了對(duì)HTMLElement的訪問(wèn),于是針對(duì)IE瀏覽器,我們就不能用HTMLElement.prototype來(lái)進(jìn)行擴(kuò)展了,但我們可以通過(guò)重寫以下幾個(gè)函數(shù)來(lái)達(dá)到目的:
document.getElementById
document.getElementsByTagName
document.createElement
document.documentElement
document.body
?。≒S:記憶中獲取DOM元素好像就是以上這些方法了~不知道還有沒(méi)有其他)
重寫后,再進(jìn)行一些處理變換就可以得到以下完整的頁(yè)面代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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,目前為止已經(jīng)解決了兼容性問(wèn)題,這是所有瀏覽器都能順利通過(guò)的DOM元素?cái)U(kuò)展的代碼,但是這樣還有一個(gè)小問(wèn)題,細(xì)心的人會(huì)發(fā)現(xiàn)在IE瀏覽器里面彈出的結(jié)果是"undefined",而不是"你好";問(wèn)題的原因在于IE的事件綁定上,看以上代碼,當(dāng)調(diào)用alert(this.innerHTML)的時(shí)候,由于IE綁定事件用的是attachEvent,這時(shí)候this指向的是windows,于是現(xiàn)在的目標(biāo)的要改變this指向的對(duì)像,將this指向tagA。于是經(jīng)過(guò)修改,完整代碼如下:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能擴(kuò)展</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);//這里是關(guān)鍵
});
}
}
DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");
wrap.bind("click",function(){
alert(this.innerHTML);
})
</script>
</body>
</html>
您可能感興趣的文章:
- JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法
- js學(xué)習(xí)總結(jié)之DOM2兼容處理順序問(wèn)題的解決方法
- Dom操作之兼容技巧分享
- Dom與瀏覽器兼容性說(shuō)明
- DOM Scripting中的圖片切換[兼容Firefox]
- 前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等](持續(xù)更新)
- javascript firefox兼容ie的dom方法腳本
- javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問(wèn)兼容問(wèn)題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法
相關(guān)文章
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1...2007-02-02
use jscript Create a SQL Server database
use jscript Create a SQL Server database...2007-06-06
LayUI+Shiro實(shí)現(xiàn)動(dòng)態(tài)菜單并記住菜單收展的示例
這篇文章主要介紹了LayUI+Shiro實(shí)現(xiàn)動(dòng)態(tài)菜單并記住菜單收展的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
微信公眾號(hào)JS-SDK獲取當(dāng)前經(jīng)緯度以及地址信息的方法
最近微信JS-SDK開發(fā)過(guò)程中,遇到了獲取坐標(biāo)位置的需求,所以下面這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)JS-SDK獲取當(dāng)前經(jīng)緯度以及地址信息的相關(guān)資料,需要的朋友可以參考下2022-06-06
JavaScript實(shí)現(xiàn)文本中間縮略的兩種方案
項(xiàng)目中經(jīng)常會(huì)遇到縮略展示文字的場(chǎng)景,即要求文字在一行不換行展示,超出自動(dòng)展示...,常用的展示效果有兩種,文字中間縮略以及文字末尾縮略,本文將通過(guò)代碼示例給大家詳細(xì)的講一下這兩種方案,需要的朋友可以參考下2024-06-06
javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06

