Javascript 给页面元素添加时间函数探讨

前言

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);

就可以了。

 


 

你可能感兴趣的:(JavaScript)