Javascript 給頁面元素添加時間函數探討

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前言

HTML 本身就有事件觸發的屬性，比如 onclick, onmouseover ,....。

直接看Code(註：本文都以onclick 來做例子)

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>var func = function test(str){   alert("go test "+str);}</script></HEAD><BODY><input type=button name="name1" id="id1" onclick="test(this.id)" value="click"><input type=button name="name1" id="id2" onclick="test(this.id)" value="click"></BODY></HTML>

這個例子很簡單，但是如果有以下狀況出現：

1. 元素的onclick 事件函數不確定

2. 傳遞的參數是後台傳輸的，有很大的不確定性或動態性

3. 傳遞的參數的值比較特殊，比如說是一個 object , array。更有甚者值裡面就包含單、雙引號。

可能會說，我可以把 object , Array 轉換成string, 或是使用逸出字元替代雙引號。但是不顧能否解決，複雜度和靈活性都遠遠存在問題。

當然，解決方案就是使用JS來添加事件函數。

使用JS添加事件函數

直接看正確的程式碼範例：

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>var func = function test(str){   alert("go test "+str);}</script></HEAD><BODY><input type=button name="name1" id="id1" value="click"><input type=button name="name1" id="id2" value="click"><script>var inputobjs = document.getElementsByName("name1");for(var i=0;i<inputobjs.length;i++){  var inputobj = inputobjs[i];  inputobj.onclick = function()  {     test(this.id);  }}</script></BODY></HTML>

以上執行個體很簡單，實現的機制也很簡單，就是使用 obj.onclick 來實現
需要注意的是在寫的時候可能會有意無意犯了以下錯誤：

1. onclick 的賦值不對

2. 參數傳遞錯誤

onclick 的賦值不對

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>var func = function test(str){   alert("go test "+str);}</script></HEAD><BODY><input type=button name="name1" id="id1" value="click"><input type=button name="name1" id="id2" value="click"><script>var inputobjs = document.getElementsByName("name1");for(var i=0;i<inputobjs.length;i++){  var inputobj = inputobjs[i];  inputobj.onclick = test(inputobj.id);}</script></BODY></HTML>

這裡直接寫成

inputobj.onclick = test(inputobj.id);

看上去和在元素中定義的是一樣的。

但是這會被解析成執行。

函數名(參數)； ==> 這種格式在HTML會被當成字串，在 <script> 標籤中就會被執行，被調用，而不是在定義。

以上執行的結果是：

事件添加不成功，函數直接執行。(IE中還會出錯)

所以正確的方式就是使用
obj.onclick =function()
{
test(this.id);
}

這種方式定義。可能你會說，這個定義只是額外加了外面一層function 包起來，如果實在不想這麼寫，怎麼辦？

那就換以下方式吧：

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>var func = function test(str){   str = this.id;   alert("go test "+str);}</script></HEAD><BODY><input type=button name="name1" id="id1" value="click"><input type=button name="name1" id="id2" value="click"><script>var inputobjs = document.getElementsByName("name1");for(var i=0;i<inputobjs.length;i++){  var inputobj = inputobjs[i];  inputobj.onclick = func;}</script></BODY></HTML>

參數傳遞錯誤

看錯誤例子：

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>function test(str){   alert("go test "+str);}</script></HEAD><BODY><input type=button name="name1" id="id1" value="click"><input type=button name="name1" id="id2" value="click"><script>var inputobjs = document.getElementsByName("name1");for(var i=0;i<inputobjs.length;i++){  var inputobj = inputobjs[i];  inputobj.onclick = function()  {     test(inputobj.id);  };}</script></BODY></HTML>

錯在哪？ inputobj 相當與一個全域變數，對於兩次不同的賦值來說，傳遞的參數值都是一樣的（最後一次賦值）。

要修改，很簡單

test(inputobj.id);

改成

test(this.id);

就可以了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More