以下用一个实际栗子说明问题:

// 定义两个输入框, 输入两个整数, 获取其最大公约数和最小公倍数

标签内代码:

<body><divclass="root"><inputtype="text"id="one"><inputtype="text"id="two"><buttonid="btn"></button><divid="put"></div></div></body>

js代码:

// 不用id绑定 btn和putbtn.onclick=function(){varoneEL=document.getElementById('one').value;vartwoEL=document.getElementById('two').value;varmax=0,min=0;oneEL>twoEL?max=oneEL:max=twoEL;oneEL<twoEL?min=oneEL:min=twoEL;// divisorvardivisor=0;for(vari=1;i<=min;i++){if(oneEL%i==0&&twoEL%i==0){divisor=i;}}// multiplevarmultiple=0;for(vari=max;i<=oneEL*twoEL;i++){if(i%oneEL==0&&i%twoEL==0){multiple=i;break;}}put.innerHTML=('最大公约数为: '+divisor+'最小公倍数为: '+multiple);}

// 用id绑定 btn和put// 绑定后btn--btnEL, put--putELvarbtnEL=document.getElementById('btn');varputEL=document.getElementById('put');btnEL.onclick=function(){varoneEL=document.getElementById('one').value;vartwoEL=document.getElementById('two').value;varmax=0,min=0;oneEL>twoEL?max=oneEL:max=twoEL;oneEL<twoEL?min=oneEL:min=twoEL;// divisorvardivisor=0;for(vari=1;i<=min;i++){if(oneEL%i==0&&twoEL%i==0){divisor=i;}}// multiplevarmultiple=0;for(vari=max;i<=oneEL*twoEL;i++){if(i%oneEL==0&&i%twoEL==0){multiple=i;break;}}putEL.innerHTML=('最大公约数为: '+divisor+'最小公倍数为: '+multiple);}

(二者得到结果相同)

其中, 不进行id绑定时, 进行了鼠标点击事件(onclick)和输入事件(innerHTML)时, 也同样可以执行成功!
二者得到结果相同, 由此可知, js获取id属性时, 可以不获取, 直接进行事件绑定!

深层原因:
为什么可以不获取?
HTML5规范文档规定: 若一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

1.如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
2.如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.
故满足此二者条件的id属性可以在不获取时直接进行使用.