题解 | #事件委托#

Make sure you really understand the outcme of the html, "when you click the list item, one dot will become two dots, not the space between marker and dots will become smaller". so the logic will find the clicked item, then change the innerHTML to two dots

<script type="text/javascript">
      /* 2.event logic gose here
        2.1 test the binding
        
        2.2 when you click the item, two dots gather together:one dots is from ul, other one is from html
        2.3 get the clicked list item, then appedn the effect
        2.3 append the css to the dom element

        
        */

      function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement;
      }
      var ul = document.getElementById("test");

      ul.onclick = function (event) {
        // change the space between the marker and content
        // How do you add CSS with Javascript?
        // https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
        // How to add a class to a given element?
        // https://stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element
        // Reducing the gap between a bullet and text in a list item
        // https://stackoverflow.com/questions/2441059/reducing-the-gap-between-a-bullet-and-text-in-a-list-item
        // CSS: Control space between bullet and <li>
          // https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li

        // var styles = `
        // li{
        //   text-indent: -10px;
        // }
        // `;
        // var styleSheet = document.createElement("style");
        // styleSheet.innerText = styles;
        // document.head.appendChild(styleSheet);
        let target = getEventTarget(event);
        // var element = target.getElementsByTagName("li")
        // console.log(element)
        // var target2 = element.classList.add("my-class")
        //  console.log(target2)
        target.innerHTML = ".."
      //  alert( target.innerHTML);
      };
      // code from: http://jsfiddle.net/ArondeParon/2dEFg/5/

    </script>