日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

技術(shù)文章寫得少，所以有時(shí)候想寫點(diǎn)什么卻下不了手，不知道該寫什么；往往到了準(zhǔn)備要寫的時(shí)候才發(fā)現(xiàn)自己想寫的東西其實(shí)很無聊，甚至覺得很幼稚，于是又關(guān)掉了編緝器，呵呵。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、黃山區(qū)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站定制開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為黃山區(qū)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

今天周五，很閑，坐在電腦前沒什么事可做，產(chǎn)品線的人也沒提什么新的需求，可能下周會(huì)有新的需求和工作安排，但那是下周的事了。今天就想寫點(diǎn)技術(shù)的東西，也就當(dāng)作是記記筆記，本人水平有限，希望大家多多指教，嘴下留情，哈哈。

有時(shí)候我們會(huì)想擴(kuò)展DOM元素的功能，可以添加一些自定義的方法，以讓它用起來更加靈活、方便；先來舉個(gè)例子：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

毫無疑問，從以上代碼可以看出，當(dāng)點(diǎn)擊A標(biāo)簽的時(shí)候會(huì)彈出“你好”，tagA是一個(gè)DOM元素，除了有onclick事件以外，還有onmouseover,onmouseout,onmousemove等等，而這些事件都是DOM元素本身就具有的；但現(xiàn)在我們希望對它進(jìn)行擴(kuò)展，例如可以讓它支持tagA.bind，我可以用tagA.bind("click",function(){}),來代替tagA.onclick=function(){}。OK，現(xiàn)在的目的很明確，先看下面的代碼：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

以上這段代碼就是功能擴(kuò)展后的最終效果，它與上一段代碼實(shí)現(xiàn)的功能是一樣的，但現(xiàn)在它還不能執(zhí)行，要進(jìn)行擴(kuò)展后才可以，在此之前先來看一些基礎(chǔ)知識(shí)，這很重要，因?yàn)榈认聲?huì)用到：

　　1、HTMLElement，在DOM標(biāo)準(zhǔn)中，每個(gè)元素都繼承自HTMLElement，而HTMLElement又繼承自Element，Element又繼承自Node；于是我們可以使用HTMLElement的Prototype來擴(kuò)展HTML元素的方法和屬性，如何實(shí)現(xiàn)？我們來看一段代碼：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

以上代碼在頁面加載的時(shí)候就彈出“這是一個(gè)擴(kuò)展方法”，不過相信你已經(jīng)注意到了，在IE6,7,8里面會(huì)出錯(cuò)，但在IE9以上或者Chrome,Firefox,Opera這些瀏覽器里面都能正常運(yùn)行，這是兼容性問題，不用擔(dān)心，后面會(huì)解決。

以上的代碼靈活性不夠好，我們優(yōu)化一下，讓它更加靈活：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

從以上代碼可以看出，有了DOMExtend這個(gè)方法以后，我們就可以通過傳入不用的name 和 fn 實(shí)現(xiàn)不同的擴(kuò)展。

2、以上講完了HTMLElement，接下來講講事件的綁定，很多人都知道，IE和其他瀏覽器的事件綁定方式不一樣，實(shí)現(xiàn)兼容所有瀏覽器的事件綁定的代碼如下：

 
 
 

  
  
  
function BindEvent(elem,event,fun){ 
  
  
  
    if(elem.addEventListener){ 
  
  
  
        elem.addEventListener(event,fun,false); 
  
  
  
    } 
  
  
  
    else{ 
  
  
  
        elem.attachEvent("on"+event,fun); 
  
  
  
    } 
  
  
  
}
 
 
 

以下是事件綁定的使用例子：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

以上代碼運(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，相信通過以上的分析，對HTMLElement擴(kuò)展和事件綁定都有了相當(dāng)?shù)牧私?，結(jié)合這兩個(gè)知識(shí)點(diǎn)，我們可以寫出如下的代碼：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

執(zhí)行以上這個(gè)頁面，在IE9,Chrome,Opera,Firefox等標(biāo)準(zhǔn)瀏覽器里都能正常觸發(fā)tagA的點(diǎn)擊事件，于是現(xiàn)在只剩下一個(gè)問題，就是要兼容其他瀏覽器；IE瀏覽器之所以出錯(cuò)，是因?yàn)樗鼈冸[藏了對HTMLElement的訪問，于是針對IE瀏覽器，我們就不能用HTMLElement.prototype來進(jìn)行擴(kuò)展了，但我們可以通過重寫以下幾個(gè)函數(shù)來達(dá)到目的：

document.getElementById

document.getElementsByTagName

document.createElement

document.documentElement

document.body

（PS：記憶中獲取DOM元素好像就是以上這些方法了～不知道還有沒有其他）

重寫后，再進(jìn)行一些處理變換就可以得到以下完整的頁面代碼：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  

  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

OK，目前為止已經(jīng)解決了兼容性問題，這是所有瀏覽器都能順利通過的DOM元素?cái)U(kuò)展的代碼，但是這樣還有一個(gè)小問題，細(xì)心的人會(huì)發(fā)現(xiàn)在IE瀏覽器里面彈出的結(jié)果是"undefined"，而不是"你好"；問題的原因在于IE的事件綁定上，看以上代碼，當(dāng)調(diào)用alert(this.innerHTML)的時(shí)候，由于IE綁定事件用的是attachEvent，這時(shí)候this指向的是windows，于是現(xiàn)在的目標(biāo)的要改變this指向的對像，將this指向tagA。于是經(jīng)過修改，完整代碼如下：

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
  
  
  
  
 
  
  
  

  
  
  
 
  
  
  
    你好
  
  
  
    
  
  
  
 
  
  
  

 
 
 

本文標(biāo)題：兼容所有瀏覽器的DOM擴(kuò)展功能
新聞來源：http://m.5511xx.com/article/dhgdeee.html