一個事件啟用多個JavaScript函數

來源:互聯網
上載者:User

  如果你的網頁中一個“OnLoad”事件要啟用兩個以上的JavaScript函數,那怎麼辦呢?

 

      請看下面一個例子:

  < BODY OnLoad='alert("這是標籤調用的函數")'>

  < script language="JavaScript">

  function myfunction(){

  alert("這是JS指令碼調用的函數");

  }

  document.body.onload=myfunction;

  < /script>

  < /BODY>

  運行後你會發現,它只跳出一個“這是JS指令碼調用的函數”的警告框。< BODY>標籤中要求啟用的函數被“忽略”了。當然你可以運用前面提過的方法,把兩個函數放一個函數裡啟用。但這樣有不少弊端,特別是如果把這段 JavaScript代碼寫成一個"myjs.js"檔案,要用它的話直接加上< script language="JavaScript" src="myjs.js">< /script>即可,但如果還要在引用檔案的頁面中根據情況修改標籤或者添加一段代碼,多麻煩呀。這就降低了代碼的適用性了。

  可不可以在編寫JavaScript代碼時就設計好,如果前面OnLoad事件已經有函數要啟用,讓它仍然啟用前面的函數,但同時也啟用本段代碼所需要的函數?答案是肯定的。我們先看下這段代碼:

  < BODY OnLoad='alert("這是< BODY>標籤調用的函數")'>

  < script language="JavaScript">

  // document.body.onload是函數(function)型,用toString()函數轉為字串(string)型:

  alert(document.body.onload.toString());

  < /script>

  < /BODY>

  運行後其中一個警告框中提示:

  function anonymous()

  {

  alert("這是標籤調用的函數")

  }

  發現什麼了嗎?“document.body.onload.toString()”就是上面這段函數代碼!我們這段字串作為代碼的一部分運行,那麼我們就多了一個函數“anonymous()”,於是將這個函數和我們現在需要啟用的函數一起啟用就行了!

  下面我們以第一次提到的代碼為例進行修改,得到最終代碼:

  < BODY OnLoad='alert("這是標籤調用的函數")'>

  < script language="JavaScript">

  function myfunction(){

  alert("這是JS指令碼調用的函數");

  }

  //現在我們要啟用的函數是“myfunction()”,原來要啟用的函數是標籤裡的“alert()”,

  //下面這段代碼可以兩個一起啟用:

  myActive="myfunction()";

  if(document.body.onload.toString())

  {

  eval(document.body.onload.toString().replace('anonymous()','bodyload()'));

  document.body.onload=new Function("bodyload();"+myActive);

  }

  else document.body.onload=new Function(myActive);

  < /script>

  < /BODY>

  上段代碼中,變數myActive是JS代碼中要啟用的函數,eval(string)函數是把其字串參數當作是JavaScript指令碼來運行。我們把 document.body.onload.toString()中的“anonymous()”替換為“bodyload()”,得到一個新函數 “bodyload()”,它包含了所有原來要啟用的函數,再把函數“bodyload()”和我們要啟用的函數一起在OnLoad事件中啟用。

  為什麼要把“anonymous()”替換為“bodyload()”呢?因為這個方法適用於所有事件(例如OnMouseOver),而所有事件 toString()都是得到“anonymous()”,為了不和其它事件也用了這個方法衝突,我們把它替換掉。在其它事件中也依此替換即可。

  好了,我們運行一下最終代碼,如你所願地兩個函數都啟用了吧?添加的代碼也挺簡單,有挺強的適用性。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.