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

废话不说，直接上demo

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

<form>
    <input type="button" id="test1" οnclick="test1();" value="测试1"/>
    <input type="button" name="test2" οnclick="test2();" value="测试2"/>
    <input type="button" id="test3" οnclick="test4();" value="测试3"/>
    <input type="button" name="test4" οnclick="test3();" value="测试4"/>
    <img src=""  name="test5" οnclick="test5();" alt="测试5">
    <div id="test6"  οnclick="test6();">测试6</div>
    <a href="#"  name="test7" οnclick="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" οnclick="test1();" value="测试1"/>
<input type="button" name="test2" οnclick="test2();" value="测试2"/>
<input type="button" id="test3" οnclick="test4();" value="测试3"/>
<input type="button" name="test4" οnclick="test3();" value="测试4"/>
<img src=""  name="test5" οnclick="test5();" alt="测试5">
<div id="test6"  οnclick="test6();">测试6</div>
<a href="#"  name="test7" οnclick="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对象，为什么会有如此大的差别？造成这种现象的原因是什么？无奈小编技术水平有限，暂且搁置这个不是问题的问题。