阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript DOM二级事件绑定问题

      2、DOM二级事件绑定问题

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #div1{
                  width: 100px;
                  height: 100px;
                  background: orange;
              }
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          function bind(ele,type,fn){
              if(ele.addEventListener){
                  ele.addEventListener(type,fn,false);
                  //ele.addEventListener(type,fn);//也可以写成这样的
              }else{
                  ele.attachEvent("on"+type,fn);
              }
          }
      /*    alert(typeof oDiv.addEventListener);//function
          alert(typeof oDiv.attachEvent);//在IE7里面是object*/
          function unbind(ele,type,fn){
              if(ele.removeEventListener){
                  ele.removeEventListener(type,fn,false);
              }else{
                  ele.detachEvent("on"+type,fn)
              }
          }
      
      
      
          bind(oDiv,"click",fn1);
          bind(oDiv,"click",fn2);
          bind(oDiv,"click",fn3);
          bind(oDiv,"click",fn4);
          bind(oDiv,"click",fn5);
          bind(oDiv,"click",fn6);
          bind(oDiv,"click",fn7);
          bind(oDiv,"click",fn8);
          bind(oDiv,"click",fn9);
          bind(oDiv,"click",fn10);
          /*标准浏览器打印:1,2,3,4,5,6,7,8,9,10
          * IE7/8:9,8,7,10,6,5,4,3,2,1
          * */
          //IE和标准浏览器的区别:
          // 1、this不指向被绑定的DOM元素了;
          // 2、顺序是乱了,如果少,会是倒序的;
          // 3、可以在一个元素上绑定同一个方法;
      
           function fn1(){console.log("1")}
          function fn2(){console.log("2")}
          function fn3(){console.log("3")}
          function fn4(){console.log("4")}
          function fn5(){console.log("5")}
          function fn6(){console.log("6")}
          function fn7(){console.log("7")}
          function fn8(){console.log("8")}
          function fn9(){console.log("9")}
          function fn10(){console.log("10")}
      
      
      </script>
      
      目录
      本文目录
      目录