Javascript 给页面元素添加事件函数探讨

最新推荐文章于 2022-06-06 18:42:57 发布

oscar999

最新推荐文章于 2022-06-06 18:42:57 发布

阅读量1.7k

点赞数

分类专栏： 130-Web语言

本文链接：https://blog.csdn.net/oscar999/article/details/8911953

版权

130-Web语言专栏收录该内容

228 篇文章 2 订阅

订阅专栏

前言

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" οnclick="test(this.id)" value="click">
<input type=button name="name1" id="id2" οnclick="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);

就可以了。

oscar999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript 给页面元素添加事件函数探讨

前言HTML 本身就有事件触发的属性，比如 onclick, onmouseover ,....。直接看Code(注：本文都以onclick 来做例子) New Document var func = function test(str){ alert("go test "+str);}这个例子很简单，但是如果有以下状况出现：
复制链接

扫一扫