本文共 951 字，大约阅读时间需要 3 分钟。

前言

HTML 本身就有事件触发的属性，比如 onclick, onmouseover ,....。

直接看Code(注： 本文都以onclick 来做例子)

这个例子很简单， 但是如果有以下状况出现：

1.  元素的onclick 事件函数不确定

2. 传递的参数是后台传输的，有很大的不确定性或动态性

3. 传递的参数的值比较特殊，比如说是一个 object , array。 更有甚者值里面就包含单、双引号。

可能会说， 我可以把 object , Array 转换成string, 或是使用转义字符替代双引号。但是不顾能否解决，复杂度和灵活性都远远存在问题。

当然，解决方法就是使用JS来添加事件函数。

使用JS添加事件函数

直接看正确的代码示例：

以上实例很简单，实现的机制也很简单， 就是使用 obj.onclick 来实现 需要注意的是在写的时候可能会有意无意犯了以下错误：

1.  onclick 的赋值不对

2.  参数传递错误

onclick 的赋值不对

这里直接写成

inputobj.onclick = test(inputobj.id);

看上去和在元素中定义的是一样的。

但是这会被解析成执行。

函数名(参数)；  ==> 这种格式在HTML会被当成字符串，在 <script> 标签中就会被执行，被调用，而不是在定义。

以上执行的结果是：

事件添加不成功， 函数直接执行。(IE中还会出错)

所以正确的方式就是使用

obj.onclick =function() {      test(this.id); }

这种方式定义。 可能你会说，这个定义只是额外加了外面一层function 包起来，如果实在不想这么写，怎么办？

那就换以下方式吧：

参数传递错误

看错误例子：

错在哪？ inputobj 相当与一个全局变量， 对于两次不同的赋值来说，传递的参数值都是一样的（最后一次赋值）。

要修改， 很简单

test(inputobj.id);

改成

test(this.id);

就可以了。

转载地址：https://oscar.blog.csdn.net/article/details/8911953 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！