请使用以下代码:
HTML
<button id="button>click me</button>
Run Code Online (Sandbox Code Playgroud)
JS - 版本1
window.onload = init;
function init() {
console.log('init called');
var button = document.getElementById('button');
button.onclick = buttonClickHandler;
}
function buttonClickHandler() {
console.log('button clicked');
}
Run Code Online (Sandbox Code Playgroud)
vs相同的HTML
JS - 版本2
window.onload = init();
Run Code Online (Sandbox Code Playgroud)
在这两种情况下,"init called"会立即出现在控制台中,但在第二种情况下,会出现一个错误,指出按钮为空.
这里有2件事情在玩.1)在版本1中,它等待DOM在版本2中加载2),它在DOM加载之前发生,或者看起来如此.
我的问题.请尽可能清楚地解释版本1中发生的情况与版本2中发生的情况.什么window.onload = init是vs什么window.onload = init()是技术术语?还请解释每个版本的行为.为什么1等待,但2不等?
脚本需要在按钮元素之前,例如在头部:http://jsfiddle.net/XMEjr/1/
版本1将init函数设置为调用window.onload事件的函数.该行未调用该函数; 它只是被赋予(作为一个价值)一个属性.
版本2将函数的结果设置为init调用window.onload事件的函数.这是有区别的().
显然init函数在onload被触发之前被调用(以获得该结果并将其设置为onload处理程序).所以函数启动,无法按buttonid 找到元素(因为DOM还没有准备好),所以getElementById返回null.然后尝试访问onclick属性null停止它有错误.
| 归档时间: |
|
| 查看次数: |
191 次 |
| 最近记录: |