发布评论案例详解

该发布评论所要实现的功能有：
1.文本框输入文字，对应的文字字数改变
2.点击发布，可以将评论按一定的形式发布
3.点击删除，可以进行删除操作

首先是功能1.文本框输入文字，对应的文字字数改变

// *****************输入文字改变字数***********************
      // 1.获取标签(点击什么 什么改变都需要获取)
      let area = document.querySelector("#area");
      let useCount = document.querySelector(".useCount");
      // 2.注册事件
      area.addEventListener("input", function () {
      //将文本框中输入的内容长度输出到字数计数的位置
        useCount.innerHTML = area.value.length;
      });

其次是功能2.点击发布，可以将评论按一定的形式发布

先分析功能2，

• 有两种方法可以触发事件，第一种是按发布按钮，第二种是回车键。
• 如果在文本框内输入的内容（内容长度=0）为空白，则不输出（判断）
• 内容的发布，可以用节点来做，创建新节点，再将其追加到对应的结构中
• 内容发布之后，要将输入框及其文字计数恢复为空白和0

// *****************点击发布显示内容***********************
      // 1.获取标签
      let btn = document.querySelector("#send");
      let list = document.querySelector("#list");
      // 2.注册事件
      btn.addEventListener("click", function () {
        // 补充：输入不能为0
        if (area.value.length === 0) {
          alert("内容不能为空");
          return;
        }
        // 2.1创建节点
         // 随机事件
        let random = Math.floor(Math.random() * dataArr.length);
        let li = document.createElement("li");
        // 2.2节点内容
        li.innerHTML = ` 

        ${dataArr[random].imgSrc}"/>
        ${dataArr[random].uname}
        
${new Date().toLocaleString()}
        
        
${area.value}
        X
       `;
        // 2.3追加节点
        list.insertBefore(li, list.children[0]);
        // 2.4重置
        area.value = "";
        useCount.innerHTML = 0;
      });
      //3.回车发布
      area.addEventListener("keydown", function (e) {
      //key是指用户按下键盘键的值
        if (e.key == "Enter") {
          btn.click();
        }
      });

最后是功能3.点击发布，点击删除，可以进行删除操作
分析：
我们所要删除的内容是我们通过程序追加进去的，所以我们可以通过事件委托，减少事件的绑定次数

list.addEventListener("click", function (e) {
			//如果事件对象的class名为the_del
        if (e.target.className === "the_del") {
          //将其父元素移除，当前e.target实际上就是class为the_del的这个标签，而我们不能只删除这个元素，所以通过事件委托，将其父元素删除
          list.removeChild(e.target.parentNode);
        }
      });