JS基本语法8：实例演示事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式

一、实例演示事件冒泡与事件委托

1.事件冒泡

事件由内向外,逐级向上传递,直到根元素
事件冒泡可以被禁用:ev.stopPropagation()

<body>
    <!-- 事件冒泡 -->
    <div>
      <button>点击</button>
    </div>
    <script>
      /* 事件冒泡
        子级触发事件，父级同名事件触发执行
        每个上级都有同名事件，事件从子级触发后会一级一级向上传递并触发
        */
      document.querySelector("button").onclick = function () {
        // console.log(this)
        console.log("1:" + this.tagName)
      }
      document.querySelector("div").onclick = function () {
        // console.log(this)
        console.log("2:" + this.tagName)
      }
      document.body.onclick = function () {
        // console.log(this)
        console.log("3:" + this.tagName)
      }
      document.documentElement.onclick = function () {
        // console.log(this)
        console.log("4:" + this.tagName)
      }
      /* 
      1:BUTTON 
      2:DIV   
      3:BODY
      4:HTML
      */
    </script>
  </body>

2.事件委托

事件主体：
子级上的事件，会自动传递到低级上的同名事件：冒泡
所有可以将原来需要添加到子级元素上的事件，直接委托到父级元素上执行
有2部分组成—父子关系

1.事件绑定主体:被添加了事件属性的元素  <ul>
  `  this=== ev.currentTarget`
2.事件触发的主体:用户实际点击的元素<li>
  `  ev.target`

<ul>
      <li>item1</li>
      <li>item2</li> 
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <script>
      /* 实现的功能：
        单击li元素，显示出当前点击li的内容
        */
      /*   const li = document.querySelectorAll("li")
      li.forEach(function (item) {
        item.onclick = function () {
          console.log(item.textContent)
        }
      }) */
      /* 根据事件冒泡原理，li.onclick 必然会在ul.onclick上触发
ev：表示事件对象
事件对象参数：要么传“事件对象”，要么不要传参数
*/
      const ul = document.querySelector("ul")
      ul.onclick = function (ev) {
        console.log(ev.target.textContent)
        console.log(ev.currentTarget === this) //true
        console.log(ev.currentTarget)
        console.log(this)
      }
      //   事件委托:事件主体不是主体元素
      /* 
    事件主体：有2部分组成
    1。事件绑定主体:被添加了事件属性的元素  <ul>
        this=== ev.currentTarget
    2。事件触发的主体:用户实际点击的元素<li>
        ev.target
    */
    </script>
  </body>

二、实例演示表单常用事件与默认行为禁用方式

5.1 常用事件

submit: 提交
focus: 焦点
blur: 失去焦点
change: 值改变,且失去焦点时
input: 值一旦改变就触发, 不等失去焦点

5.2 禁用表单默认提交行为的 3 种方法

form.onsubmit = 'return false'
form.button.type = 'button'
event.preventDefault():禁用默认行为

  <body>
    <!-- 禁用表单提交的方式：
    1. 在form 元素添加onsubmit事件属性禁止提交 onsubmit="return false"  -->
    <!-- <form action="login.php" method="post" id="login" onsubmit="return false"> -->
    <form action="login.php" method="post" id="login">
      <label class="title">用户登录 </label>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" value="" autofocus />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" value="" />
      <!-- 2. 在button 按钮的type默认属性修改成 button，也能禁用表单的提交行为 -->
      <button type="submit">登录</button>
      <!-- <button type="button">登录</button> -->
    </form>
    <script>
      /* //submit事件：默认提交进执行
       3. 通过添加事件方法来 禁止提交表单   事件方法可用前面的事件属性表示  */
      /*  const form = document.forms.login
      form.onsubmit = function () {
        // alert("上传")
        return false
      } */
      /*
     禁用表单提交行为，是为了用户自定义提交行为
     4.禁用默认行为：  ev.preventDefault()
      */
      document.forms.login.onsubmit = function (ev) {
        //禁用默认行为
        ev.preventDefault()
        //禁用冒泡
        ev.stopPropagation()
        //当表单事件的默认行为被禁用后， this===ev.target===ev.currentTarget
        console.log(this)
        console.log(ev.target)
        console.log(ev.currentTarget)
        //表单中的任何一个控件，都有一个form属性，永远和当前表单元素绑定
        console.log(ev.currentTarget.email)
        //禁用默认提交行为后，我们可以对表单控件的内容进行验证操作
        //获取到email
        const email = this.email.value
        //获取 password
        const password = this.password.value
        // 对 email和password非空验证
        if (email.length === 0) {
          alert("邮箱不能为空！")
          return false
        } else if (password.length === 0) {
          alert("密码不能为空！")
          return false
        }
      }
    </script>
  </body>

8/12复习了表单事件

在表单中的任何元素中，都有一个form属性，通过这个属性可以获取表单中的任何元素
`event.preventDefault()`禁用默认行为是为了自定义行为。
`event`已经被废弃，通常都是通过传参的方式来做
document.form.login.onsubmit=function(){
event.preventDefault();
}
============

document.form.login.onsubmit=function(ev){

ev.preventDefault();

}