js中window.load事件 怎么用啊

一、js中window.load事件 怎么用啊

1、在JavaScript中，使用window.onload事件可以让函数在页面完全加载完毕后执行。这里所谓的“页面完全加载”，是指页面的所有资源，如HTML文档、CSS文件、图片等，都已经加载完成，而不是在DOM元素加载完成后就执行。因此，如果使用window.onload=aa()的形式，它会确保函数aa()在所有资源加载完成后执行。

2、值得注意的是，window.onload可以接受一个函数作为参数，也可以直接赋值为一个函数表达式。例如：

3、window.onload= function(){ console.log('页面加载完成');};

4、这种方式与直接将函数名赋值给window.onload等价，即：

5、window.onload= function(){ console.log('页面加载完成');};

6、window.onload= function(){ console.log('页面加载完成');};

7、然而，直接将函数名赋值给window.onload可能会导致函数立即执行。为了避免这种情况，可以使用立即执行函数表达式（IIFE）的形式：

8、window.onload=(function(){ console.log('页面加载完成');})();

9、这种方式可以确保函数在页面加载完成后执行，而不是在页面加载过程中立即执行。

10、另外，可以将多个函数挂载到window.onload事件上，这样当页面加载完成后，所有挂载的函数都会被依次执行。例如：

11、window.onload= function(){ console.log('页面加载完成');}

12、window.onload= function(){ console.log('附加函数执行');}

13、在实际开发中，建议使用addEventListener方法来为window对象添加onload事件监听器，这样可以避免覆盖之前已经添加的监听器，同时也能支持多个监听器的添加。例如：

14、window.addEventListener('load', function(){ console.log('页面加载完成');});

15、这种方式更灵活，更适合复杂的应用场景。

二、JavaScript里怎样实现等待外部JS文件LOAD之后再执行下一步

1、这样，只有外部JS文件LOAD之后，才能调用load()，而load()这时是一个“没有功能”的函数,当然加上功能更好

2、以上只是设想没有尝试，原因是：

3、在通常情况下，当网页代码的<head区加上：

4、<SCRIPT language=javascript src=外部JS文件.js</SCRIPT后，该外部JS文件会在网页下载的初期进入浏览器缓存做好被调用准备，所以“无需等待”谨供参考

三、js动态加载事件的几种方法总结_javascript技巧

1、有些时候需要动态加载javascript事件的一些方法

2、往往我们需要在 JS中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。

3、var obj= document.getElementById("obj");

4、obj.setAttribute("onclick","javascript:alert('测试');");

5、这里利用 setAttribute指定 onclick属性，简单，很好理解，

6、但是：IE不支持，IE并不是不支持 setAttribute这个函数，而是不支持用 setAttribute设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute设置 style、onclick、onmouseover这些属性在 IE中是行不通的。

7、方法二、用 attachEvent和 addEventListener

8、obj.attachEvent("onclick", Foo);

9、obj.attachEvent("onclick", function(){alert("测试");});

10、其它浏览器支持 addEventListener

11、obj.addEventListener("click", Foo, false);

12、obj.addEventListener("click", function(){alert("测试");}, false);

13、注意 attachEvent的事件带 on，如 onclick，而 addEventListener不带 on，如 click。

14、顺便说一下 addEventListener的第三个参数（虽然很少用） useCapture-如果为 true，则 useCapture指示用户希望启动捕获。启动捕获后，所有指定类型的事件将在被指派到树中其下面的任何 EventTargets之前指派给已注册的 EventListener。正在通过树向上 bubbling的事件将不触发指定的使用捕获的 EventListener。

15、这在多个浏览器中均支持，这是属于旧的规范（方法二属于 DOM2的规范），不过由于使用方便，用的场合也比较多。

16、obj.setAttribute('onclick',document.all? eval(function(){show()}):'javascript:show()');

17、attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）

18、addEventListener方法用于 Mozilla系列

19、document.getElementById("btn").onclick= method1;

20、document.getElementById("btn").onclick= method2;

21、document.getElementById("btn").onclick= method3;

22、如果这样写,那么将会只有medhot3被执行

23、var btn1Obj= document.getElementById("btn1");

24、//object.attachEvent(event,function);

25、btn1Obj.attachEvent("onclick",method1);

26、btn1Obj.attachEvent("onclick",method2);

27、btn1Obj.attachEvent("onclick",method3);

28、执行顺序为method3->method2->method1

29、如果是Mozilla系列，并不支持该方法，需要用到addEventListener

30、var btn1Obj= document.getElementById("btn1");

31、//element.addEventListener(type,listener,useCapture);

32、btn1Obj.addEventListener("click",method1,false);

33、btn1Obj.addEventListener("click",method2,false);

34、btn1Obj.addEventListener("click",method3,false);

35、执行顺序为method1->method2->method3

36、var el= EDITFORM_DOCUMENT.body;

37、//先取得对象，EDITFORM_DOCUMENT实为一个iframe

38、 el.addEventListener('click', KindDisableMenu, false);

39、 el.attachEvent('onclick', KindDisableMenu);

40、 window.addEventListener('load', _uCO, false);

41、} else if(window.attachEvent){

42、 window.attachEvent('onload', _uCO);