阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 事件委托

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
      </head>
      <body>
      <div id="div1" style="background: red">
          <br/>
          <ul id="ul1" style="background: blue">
              <br/>
              <li id="li1" style="background: orange">
                  <br/>
                  <a href="javascript:;" style="background: olive;display: block;"><br/>1</a>
                  <a href="javascript:;" style="background:blueviolet;display: block;"><br/>2</a>
                  <a href="javascript:;" style="background: olive;display: block;"><br/>3</a>
                  <a href="javascript:;" style="background: chocolate;display: block;"><br/>4</a>
              </li>
          </ul>
      </div>
      </body>
      </html>
      <script>
          document.documentElement.onclick=function(event){
              event=event||window.event;
              //事件源委托给documentElement
              target=event.target||event.srcElement;//事件源
              console.log(target.nodeName)
          };
      
          //下面是动态创建的
          var p=document.createElement("p");
          document.body.appendChild(p);
          p.innerHTML="222312312312";
          /*事件委托也可以实现动态绑定*/
          /*所有的事件,都可以用事件委托来实现;时间委托是一个高级技巧*/
      </script>
      

      时间委托N级菜单

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #menu{width: 400px}
              #menu span{display: block;cursor: pointer;}
              #menu span.close:before{content: "[+] ";}
              #menu span.open:before{content: "[·] ";}
              ul li{margin-bottom: 10px; cursor: pointer;}
              span ul li{margin-bottom: 10px;}
          </style>
      </head>
      <body>
      <ul id="menu">
          <li>
              <span>第一:1111111</span>
              <ul>
                  <li><span>第一:1111111</span></li>
                  <li><span>第二:222222</span></li>
                  <li><span>第三:333333</span></li>
                  <li><span>第四:444444</span></li>
                  <li><span>第五:555555</span></li>
                  <li><span>第六:666666</span></li>
              </ul>
          </li>
          <li>
              <span>第二:222222</span>
              <ul>
                  <li><span>第一:1111111</span></li>
                  <li><span>第二:222222</span></li>
                  <li><span>第三:333333</span></li>
                  <li><span>第四:444444</span></li>
                  <li><span>第五:555555</span></li>
                  <li><span>第六:666666</span></li>
              </ul>
          </li>
          <li>
              <span>第三:333333</span>
              <ul>
                  <li><span>第一:1111111</span></li>
                  <li><span>第二:222222</span></li>
                  <li>
                      <span>第三:333333</span>
                      <ul>
                          <li><span>第一:1111111</span></li>
                          <li><span>第二:222222</span></li>
                          <li><span>第三:333333</span></li>
                          <li><span>第四:444444</span></li>
                          <li><span>第五:555555</span></li>
                          <li><span>第六:666666</span></li>
                      </ul>
                  </li>
                  <li><span>第四:444444</span></li>
                  <li><span>第五:555555</span></li>
                  <li><span>第六:666666</span></li>
              </ul>
          </li>
          <li>
              <span>第四:444444</span>
              <ul>
                  <li><span>第一:1111111</span></li>
                  <li><span>第二:222222</span></li>
                  <li><span>第三:333333</span></li>
                  <li><span>第四:444444</span></li>
                  <li><span>第五:555555</span></li>
                  <li><span>第六:666666</span></li>
              </ul>
          </li>
          <li>
              <span>第五:555555</span>
              <ul>
                  <li><span>第一:1111111</span></li>
                  <li><span>第二:222222</span></li>
                  <li><span>第三:333333</span></li>
                  <li><span>第四:444444</span></li>
                  <li><span>第五:555555</span></li>
                  <li><span>第六:666666</span></li>
              </ul>
          </li>
          <li>
              <span>第六:666666</span>
              <ul>
                  <li><span>第六:第一:1111111</span></li>
                  <li><span>第六:第二:222222</span></li>
                  <li><span>第六:第三:333333</span></li>
                  <li><span>第六:第四:444444</span></li>
                  <li><span>第六:第五:555555</span></li>
                  <li>
                      <span>第六:第六:666666</span>
                      <ul>
                          <li><span>>第六:第六:第一:1111111</span></li>
                          <li><span>第六:第六:第二:222222</span></li>
                          <li><span>第六:第六:第三:333333</span></li>
                          <li><span>第六:第六:第四:444444</span></li>
                          <li><span>第六:第六:第五:555555</span></li>
                          <li><span>第六:第六:第六:666666</span></li>
                      </ul>
                  </li>
              </ul>
          </li>
      </ul>
      </body>
      </html>
      <script>
          var oSpans=document.getElementById("menu").getElementsByTagName("span");
          for(var i=0;i<oSpans.length;i++){
              var oSapn=oSpans[i];
              var oUl=getNext(oSapn);
              if(oUl&&oUl.nodeName==="UL"){
                  oUl.style.display="none";
                  oSapn.style.backgroundColor="orange";
                  oSapn.className="close"
              }else{
                  oSapn.style.backgroundColor="#CCC";
              }
      
          }
          document.getElementById("menu").onclick=function(event){
              event=event||window.event;
              var target=event.target||event.srcElement;
              if(target.nodeName=="SPAN"){
                  var oUl=getNext(target);
                  if(oUl&&oUl.nodeName=="UL"){
                      if(oUl.style.display=="none"){
                          oUl.style.display="block";
                          target.className="open"
                      }else{
                          oUl.style.display="none";
                          target.className="close";
                          /*解决顶级关闭然后打开;第二级和第三级处于打开状态的bug*/
                          if(oUl.getElementsByTagName("UL")){
                              var oUls=oUl.getElementsByTagName("UL");
                              for(var i=0;i<oUls.length;i++){
                                  getPre(oUls[i]).className="close";
                                  oUls[i].style.display="none";
                              }
                          }
                      }
                  }
              }
          };
      
          function getNext(curEle) {//下一个弟弟节点,第一个弟弟节点;
              if ("getElementsByClassName" in window) {
                  return curEle.nextElementSibling;
              }
              var next = curEle.nextSibling;
              while (next && next.nodeType !== 1) {
                  next = next.nextSibling;
              }
              return next;
          };
          function getPre(curEle) {//上一个哥哥节点;
              if ("getElementsByClassName" in window) {
                  return curEle.previousElementSibling;
              }
              var pre = curEle.previousSibling;
              while (pre && pre.nodeType !== 1) {
                  pre = pre.previousSibling;
              }
              return pre;
          }
      </script>
      
      目录
      目录