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>```

更多相关文章

随机推荐