阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 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");
          //HTMLDivElement--HTMLElement--Element--Node--EventTarget--Object
          //其中DOM二级事件是定义在EventTarget上的;
      //    oDiv.addEventListener("click",fn1,false);
          oDiv.addEventListener("click",fn1);//和上面一样的,不写和写false一样的;
          oDiv.addEventListener("click",fn2);//和上面一样的,不写和写false一样的;
          oDiv.addEventListener("click",fn3);//和上面一样的,不写和写false一样的;
          oDiv.addEventListener("click",fn4,false);//和上面一样的,不写和写false一样的;
      
          function fn1(){console.log("1");};
          function fn2(){console.log("2");};
          function fn3(){console.log("3");};
          var num=0;
          function fn4(){
              num+=1;
              if(num==3){
                  this.removeEventListener("click",fn1,false);//移除
                  this.removeEventListener("click",fn2,false);
              }
              console.log("4");
          };
      </script>
      
      目录
      本文目录
      目录