Javascript 给页面元素添加事件函数探讨
2013-05-10 18:04
531 查看
前言
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 给页面元素添加事件函数探讨
- Javascript 给页面元素添加时间函数探讨
- Javascript 给页面元素添加时间函数探讨
- Javascript为元素添加事件处理函数
- [JavaScript]页面动态添加Object元素及ActiveX控件事件关联
- delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如
- Javascript实现页面内元素添加滚动条
- 对”多组同类元素添加相同事件,但分别执行各自的事件-以移入移出为例“的探讨
- jQuery -- 如何为动态添加的元素绑定事件处理函数
- javascript页面加载与事件监听函数
- 页面元素用JS动态添加的有效事件绑定方式(on)
- 给ajax加载的页面元素添加鼠标事件
- javascript dom 学习笔记 第九章:实现给某个元素添加加新的class的值的函数!
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- javascript中查看元素事件函数的一些技巧
- JavaScript动态改变HTML页面元素例如添加或删除
- JAVASCRIPT动态的为元素添加事件
- javascript的高级使用,设置页面元素是否相应事件与显示“正在处理”对话框
- 在jsp页面利用函数触发事件,根据dom元素的值来设置另一个dom元素的值
- JavaScript实现跨浏览器的添加及删除事件绑定函数实例