zoukankan      html  css  js  c++  java
  • 详解javascript事件绑定使用方法

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

    IE方式
    attachEvent(事件名称, 函数),绑定事件处理函数
    detachEvent(事件名称, 函数),解除绑定

    DOM方式
    addEventListener(事件名称,函数, 捕获)
    removeEventListener(事件名称, 函数, 捕获)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
      var oBtn=document.getElementById('btn1'); 
      oBtn.onclick=function ()
      {
        alert('a');
      };
        
      oBtn.onclick=function ()
      {
        alert('b');
      };
    };
    </script>
    </head>
    <body>
    <input id="btn1" type="button" value="按钮" /> 
    </body>
    </html>
    

      

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

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    window.onload=function ()
    {
      var oBtn=document.getElementById('btn1');
      //IE浏览器
      if(oBtn.attachEvent)
      {
        oBtn.attachEvent('onclick', function ()
        {
          alert('a');
        });
        oBtn.attachEvent('onclick', function ()
        {
          alert('b');
        });
      }
      //其他浏览器
      else
      {
        oBtn.addEventListener('click', function () 
        {
          alert('a');
        }, false);
        oBtn.addEventListener('click', function () 
        {
          alert('b');
        }, false);
      }
        
    };
    </script>
    </head>
    <body>
    <input id="btn1" type="button" value="按钮" />
    </body>
    </html>
    

      

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

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

    function myAddEvent(obj, ev, fn)
    {
      if(obj.attachEvent)
      {
        obj.attachEvent('on'+ev, fn);
      }
      else
      {
        obj.addEventListener(ev, fn, false); 
      }
    }
    

      


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

    myAddEvent(window,'load',function () 
    {
      alert('a');
    });
    myAddEvent(window,'load',function () 
    {
      alert('b');
    

      


  • 相关阅读:
    苹果开发者账号多少钱?个人/公司/企业申请费用及怎么选【都有】
    uniapp ios真机调试【亲测有效】
    Uniapp---IOS打包证书私钥密码怎么获取?
    微信小程序地图计算两个点之间的距离
    各大地理坐标系互转
    解决mac下vscode等应用中vim光标无法快速移动
    python 脚本如何在后代运行并记录标准输出
    wkhtmltox 在Linux上安装
    shell中的##*,%%*问题
    matplotlib、seaborn 展示中文字体
  • 原文地址:https://www.cnblogs.com/good10000/p/6017136.html
Copyright © 2011-2022 走看看