HTML中id或name与function方法名相同的问题

废话不说，直接上demo

首先小编模拟了这些元素在form中的情况，这种情况在项目中经常遇到的。

<form>
<input type="button" id="test1" onclick="test1();" value="测试1"/>
<input type="button" name="test2" onclick="test2();" value="测试2"/>
<input type="button" id="test3" onclick="test4();" value="测试3"/>
<input type="button" name="test4" onclick="test3();" value="测试4"/>
<img src=""  name="test5" onclick="test5();" alt="测试5">
<div id="test6"  onclick="test6();">测试6</div>
<a href="#"  name="test7" onclick="test7();">测试7</a>
</form>
<script type="text/javascript">
function test1(){
alert("测试1");
}
function test2(){
alert("测试2");
}
function test3(){
alert("测试4");
}
function test4(){
alert("测试3");
}
function test5(){
alert("测试5");
}
function test6(){
alert("测试6");
}
function test7(){
alert("测试7");
}
</script>

结果如下图，除了div和a会正常显示，其他的都会报错“TypeError: test is not a function”



如果将form标签去掉，所有标签都放出来呢？

<input type="button" id="test1" onclick="test1();" value="测试1"/>
<input type="button" name="test2" onclick="test2();" value="测试2"/>
<input type="button" id="test3" onclick="test4();" value="测试3"/>
<input type="button" name="test4" onclick="test3();" value="测试4"/>
<img src=""  name="test5" onclick="test5();" alt="测试5">
<div id="test6"  onclick="test6();">测试6</div>
<a href="#"  name="test7" onclick="test7();">测试7</a>
<script type="text/javascript">
function test1(){
alert("测试1");
}
function test2(){
alert("测试2");
}
function test3(){
alert("测试4");
}
function test4(){
alert("测试3");
}
function test5(){
alert("测试5");
}
function test6(){
alert("测试6");
}
function test7(){
alert("测试7");
}
</script>

结果如下图，除了img报错，其他的都会正常显示



总结一下：imge在任何情况下id或name都不能和方法名相同
input在form下会报错，在去除form后恢复正常

div a中id或name和方法名和可以相同

尽管这样，但还是强烈反对在开发中id或name的命名和function方法名相同！！！

解决方法：只要稍加注意，在命名时保证id或name和function方法名不一致即可。

小编一直想，同样都是DOM对象，为什么会有如此大的差别？造成这种现象的原因是什么？无奈小编技术水平有限，暂且搁置这个不是问题的问题。