六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 42|回复: 0

form或input name和js方法名相同问题

[复制链接]

升级  63.33%

37

主题

37

主题

37

主题

秀才

Rank: 2

积分
145
 楼主| 发表于 2013-2-7 16:26:05 | 显示全部楼层 |阅读模式
今天突然碰到form表单的名字与js方法的名字相同导致找不到js方法的问题,根据网上的一些资料和自己的理解,总结出一定原因,个人理解有错误请指正~~~
代码:
<form name="test" id="test" ><a href="#"   name="test">aa</a></form><script type="text/javascript">function test(){alert("ssss");}</script>

这样就提示找不到test方法。
这个form是一个HTML DOM对象有莫大的关系,根据事件的触发对象的作用域链往上找名为test的对象,因为javascript中方法其实也为对象,在沿着对象的作用域链往上找时,他首先回找到名字为test的HTML DOM对象form,而不会找到window.test这个对象,而找到的这个test不是一个方法,所以会提示找不到方法。这跟以下代码情况是一样的
<form name="aaa" id="test" ><input type="button"   name="test">aa</a></form><script type="text/javascript">function test(){alert("ssss");}</script>

因为button也是一个HTML DOM对象,所以首先找到的是button这个对象,所以也提示找不到方法。


改成外部绑定事件就不会出现这种情况,因为这时这时aa的环境就在window对象中,回直接找到test方法,看代码:
<form name="aaa" id="test" ><input type="button"   name="test">click me</a></form><script type="text/javascript">var aa = document.getElementById("sss");aa.onclick = test;function test(){alert("ssss");}</script>

总结:
用元素的onclick事件时,文档中不能出现与方法名一样的HTML DOM对象,因为根据作用域链他最后才会找到window对象的方法,所以都会显示找不到方法。
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表