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

一、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);

二、是不是用到javascript的网页都不是静态页面,而是动态页面

1、JavaScript的运用使得网页在用户交互方面更加灵活、动态，但并不意味着所有使用JavaScript的网页都是动态页面，而不是静态页面。

2、静态页面是指在用户请求时，服务器将预先准备好的HTML、CSS和JavaScript文件直接发送到用户浏览器的页面。这样的页面内容是静态不变的，不受用户交互的影响，无法根据用户的行为实时改变。传统的网页通常是静态页面，加载速度快，适合展示不经常更新的内容。

3、动态页面则是通过服务器端的脚本语言（如PHP、Node.js、Python等）或者客户端的JavaScript，根据用户的请求生成页面内容。动态页面能够根据用户的操作实时更新，提供更加个性化和交互性强的用户体验。社交媒体、在线购物等需要实时更新数据的网站通常采用动态页面。

4、JavaScript是一种脚本语言，主要运行在浏览器端，用于增加网页的交互性。它可以在用户浏览器上执行，动态地修改HTML和CSS，使得网页能够根据用户的行为实时更新内容，实现更加复杂的功能和用户体验。使用JavaScript的网页并不是一定就是动态页面。

5、即便是传统的静态页面，也可以通过JavaScript实现一些交互效果，例如表单验证、图像轮播等。这并不改变页面的基本特性，内容仍然是在服务器端生成，不会因为用户的操作而动态改变。在动态页面中，JavaScript可以用于与服务器端进行通信，实时地更新页面内容。这种情况下，用户的操作可以触发JavaScript代码执行，从而改变页面呈现的内容。

6、JavaScript的运用并不意味着页面一定是动态的。静态页面也可以通过JavaScript实现一定的交互效果。因此，我们在开发网页时，应根据需求和性能要求来选择使用静态页面还是动态页面。对于简单展示内容的页面，如企业宣传页面、博客等，静态页面可能更为合适，加载速度快，维护成本低。而对于需要实时更新内容的应用，如社交媒体、在线聊天等，动态页面则更具优势。

7、在使用JavaScript时，应注意保持页面的性能，避免过多的请求和处理，以确保用户获得流畅的体验。JavaScript是网页开发中强大的工具，但并非所有使用了JavaScript的网页都是动态的，关键在于如何合理运用这门技术。

三、JavaScript动态网页经典实例教程的介绍

JavaScript是一种功能强大，语法简单的脚本语言，广泛应用于网页设计中。《JavaScript动态网页经典实例教程》是在分析各大主流网站的动态网页应用的基础上，将复杂的应用剖分为合理的应用模块来讲解的。对于广大的网页设计从业人员，通过《JavaScript动态网页经典实例教程》能找到经典应用的解决方案；对于网页设计爱好者，《JavaScript动态网页经典实例教程》可以作为进步的阶梯；对于培训学校，从《JavaScript动态网页经典实例教程》中可以找到实用的JavaScript动态网页设计的培训内容。