你确定你真的知道什么时候用window.onload吗？

这个window.onload有时候突然就出现了，不出现的时候也能执行JS，总之感觉这家伙神出鬼没的，没有个规律，今天就来扒一扒这货。

 

<script>
var name = document.getElementsByName("username")[0];
name.onfocus = function () { alert(123); } 

</script>
 <body> 
<input type="text" name="username" />

这种情况下，肯定name 是undefined，更别提后面的onfocus了，再来看这种

 <body> 
<input type="text" name="username" />
<script>
var name = document.getElementsByName("username")[0];
name.onfocus = function () { alert(123); } 

</script>

现在name肯定是Object了，但是此时去页面上点击文本框，并不会弹出 123，因为name.onfocus执行的时候，页面还没有加载完成，等到你真正看到文本框的时候，这句话已经执行完了，而你此时去点击文本框的时候，此时的onfocus事件并没有，所以并不会有任何效果。而下面这种情况奇迹就出现了

<script>
 window.onload = function () {
            var name = document.getElementsByName("username")[0];
            name.onfocus = function () {
                alert(123);
            }
       }
    </script>
<body>
 <input type="text" name="username" />

window.onload是指在页面加载完成后执行里面的代码，所以此时再点击文本框，自然就会弹出 123 了。

 

所以，如果想对页面上的某个元素加上事件的话，其实有2种方式，一种是用window.onload方式，在里面获取到元素对象后定义其事件处理方式。另一种是不采用window.onload

方式，而是在script里定义一个方法，尽管方法里的要获取的元素还没有加载出来，那有什么关系，顶多是个undefined，不会出现效果罢了，而等页面加载完了之后，通过触发事件，而去调用刚刚定义的方法就可实现效果了，像这样

<script>
 var Test = function () {
            var name = document.getElementsByName("username")[0];
            alert(name.value);
       }
    </script>
<body>
 <input type="text" name="username" onfocus="Test();" value="123"/>

就会实现了，好了，大功告成了。

 

posted on 2017-03-18 09:55  奔游浪子  阅读(338)  评论(0)    收藏  举报

导航