javascript事件的绑定

古城微笑少年丶 2022-07-16 08:58 318阅读 0赞

由于html是从上至下加载的，通常我们如果在head部分引入javascript文件，那么我们都会在javascript的开头添加window.onload事件，防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个javascript文件，那么极有可能出现多个window.onload事件，但是最后起作用的只有一个，这时候就需要使用事件绑定来解决这个问题了。

IE方式
attachEvent(事件名称, 函数)，绑定事件处理函数
detachEvent(事件名称, 函数)，解除绑定
DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.οnlοad=function ()
  8. {
  9.     var oBtn=document.getElementById('btn1');
  10.     oBtn.οnclick=function ()
  11.     {
  12.         alert('a');
  13.     };
  15.     oBtn.οnclick=function ()
  16.     {
  17.         alert('b');
  18.     };
  19. };
  20. </script>
  21. </head>
  22. <body>
  23. <input id="btn1" type="button" value="按钮" />
  24. </body>
  25. </html>

这段代码，运行结果是弹出b，因为有两个oBtn的点击事件，但是只执行了最后一个，这时候就体现出事件绑定的重要性了。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.οnlοad=function ()
  8. {
  9.     var oBtn=document.getElementById('btn1');
  10.     //IE浏览器
  11.     if(oBtn.attachEvent)
  12.     {
  13.         oBtn.attachEvent('onclick', function ()
  14.         {
  15.             alert('a');
  16.         });
  17.         oBtn.attachEvent('onclick', function ()
  18.         {
  19.             alert('b');
  20.         });
  21.     }
  22.     //其他浏览器
  23.     else
  24.     {
  25.         oBtn.addEventListener('click', function ()
  26.         {
  27.             alert('a');
  28.         }, false);
  29.         oBtn.addEventListener('click', function ()
  30.         {
  31.             alert('b');
  32.         }, false);
  33.     }
  35. };
  36. </script>
  37. </head>
  38. <body>
  39. <input id="btn1" type="button" value="按钮" />
  40. </body>
  41. </html>

当你使用事件绑定的时候，那么两次点击事件都会执行，只是执行顺序在不同浏览器是不同的。在IE中是自下而上执行，而在其他浏览器中是自上而下，不过由于alert的特殊性我们可以看出差别，其他语句基本等同于没有差别，但是在对于一些对时间要求严格是事件的使用时还是需要注意的，比如之前有一篇文章图片轮播中的setInterval对时间的细微的差别最后导致滚动混乱。 基于原生javascript的图片轮播domo

最后将我们的代码整理成函数，便于之后的使用

  1. function myAddEvent(obj, ev, fn)
  2. {
  3.     if(obj.attachEvent)
  4.     {
  5.         obj.attachEvent('on'+ev, fn);
  6.     }
  7.     else
  8.     {
  9.         obj.addEventListener(ev, fn, false);
  10.     }
  11. }

这时候如果需要使用多个window.onload事件其实就和使用多个oBtn.onclick事件差不多了。如下调用函数即可。

  1. myAddEvent(window,'load',function ()
  2. {
  3.     alert('a');
  4. });
  5. myAddEvent(window,'load',function ()
  6. {
  7.     alert('b');

发表评论

表情：
评论列表 （有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读