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

今天突然碰到form表单的名字与js方法的名字相同导致找不到js方法的问题,根据网上的一些资料和自己的理解,总结出一定原因,个人理解有错误请指正~~~
代码:

<form name="test" id="test" >
<a href="#" onclick="test()" 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" onclick="test()" 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" onclick="test()" 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对象的方法,所以都会显示找不到方法。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值