×
  • Web前端首页
  • Javascript
  • 常用的冒泡处理:事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式

常用的冒泡处理:事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式

作者:Terry2023.12.09来源:Web前端之家浏览:401评论:0
关键词:js

分享常用的冒泡处理:事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式。

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

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 常用事件

  1. submit: 提交

  2. focus: 焦点

  3. blur: 失去焦点

  4. change: 值改变,且失去焦点时

  5. input: 值一旦改变就触发, 不等失去焦点

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

  1. form.onsubmit = 'return false'

  2. form.button.type = 'button'

  3. 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();
}


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20231251572121.html

网友评论文明上网理性发言 已有0人参与

发表评论: