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);
就可以了。