07-13作业

• 练习事件注册，事件派发，事件冒泡，事件代理
  -图例
  

• 代码区

  <script>
        const login=document.forms.login;
      // login.onsubmit=()=>console.log("提交了");
    //禁用元素的默认行为
    login.onsubmit = ev=>ev.preventDefult();
    login.submit.onclick=ev=>{
        // 禁用默认提交行为
        ev.preventDefault();
      //禁用冒泡
      ev.stopPropagation();
      /*console.log(ev.currentTarget);
      console.log(ev.currentTarget.form);*/
      //非空验证
      isEmpty(ev.currentTarget.form);
    };
    function isEmpty(form){
    console.log(form.email.value.length);
    console.log(form.password.value.length);
    if(form.email.value.length === 0){
        alert("邮件不能为空");
        form.email.focus();
        return false;
    }else if(
        form.password.value.length ===0
    ){
        alert ("密码不能为空");
        form.password.focus();
        return fales;
    }else{
        alert ("验证通过!");
    }
    }
    // login.email.oninput=ev=>console.log(ev.target.value);
    login.email.onblur=ev=>console.log(ev.target.value);
    </script>

• 图例
  

• 代码区
  ```
  <script>

    const comment =document.forms.comment;
    const content =comment.content;
    const btn=comment.submit;
   const list=document.querySelector('.list');
   //console.log(comment,content,btn,list);
    btn.onclick= ev =>{
        let value=content.value.trim();
        if(value.length >0 && value.length <= 100){
        const li=document.createElement('li');
        li.textContent=value;
        li.style.borderBottom='1px solid white';
        li.style.minHeight='3em'
        const delBtn=document.createElement("button");
        delBtn.textContent='删除留言';
        delBtn.style.float='right';
        delBtn.classList.add('del-btn');
        delBtn.onclick=function(){
            if(confirm('是否删除?')){
                //true:删除
                this.parentNode.remove();
                alert('删除成功');
                content.focue();
                return false;
            }
        }

        li.append(delBtn);
        list.prepend(li)
        alert("留言成功");
        content.value=null;
        content.focus();
        }else{
            alert("没有输入或超出长度");
            content.focus();
            return false;
        }
    } 
       //事件注册，事件派发，事件冒泡，事件代理
</script>```