Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS基本语法8：实例演示事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式
Blogger Information
Blog 27
fans 0
comment 0
visits 19025
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基本语法8：实例演示事件冒泡与事件委托 \实例演示表单常用事件与默认行为禁用方式
茂林
Original
1182 people have browsed it

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

1.事件冒泡

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

  1. <body>
  2.     <!-- 事件冒泡 -->
  3.     <div>
  4.       <button>点击</button>
  5.     </div>
  6.     <script>
  7.       /* 事件冒泡
  8.         子级触发事件，父级同名事件触发执行
  9.         每个上级都有同名事件，事件从子级触发后会一级一级向上传递并触发
  11.         */
  12.       document.querySelector("button").onclick = function () {
  13.         // console.log(this)
  14.         console.log("1:" + this.tagName)
  15.       }
  16.       document.querySelector("div").onclick = function () {
  17.         // console.log(this)
  18.         console.log("2:" + this.tagName)
  19.       }
  20.       document.body.onclick = function () {
  21.         // console.log(this)
  22.         console.log("3:" + this.tagName)
  23.       }
  24.       document.documentElement.onclick = function () {
  25.         // console.log(this)
  26.         console.log("4:" + this.tagName)
  27.       }
  28.       /* 
  29.       1:BUTTON 
  30.       2:DIV   
  31.       3:BODY
  32.       4:HTML
  33.       */
  35.     </script>
  36.   </body>

2.事件委托

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

  1. 1.事件绑定主体:被添加了事件属性的元素  <ul>
  2.   `  this=== ev.currentTarget`
  3. 2.事件触发的主体:用户实际点击的元素<li>
  4.   `  ev.target`
  1. <ul>
  2.       <li>item1</li>
  3.       <li>item2</li> 
  4.       <li>item3</li>
  5.       <li>item4</li>
  6.       <li>item5</li>
  7.     </ul>
  8.     <script>
  9.       /* 实现的功能：
  10.         单击li元素，显示出当前点击li的内容
  11.         */
  12.       /*   const li = document.querySelectorAll("li")
  13.       li.forEach(function (item) {
  14.         item.onclick = function () {
  15.           console.log(item.textContent)
  16.         }
  17.       }) */
  18.       /* 根据事件冒泡原理，li.onclick 必然会在ul.onclick上触发
  19. ev：表示事件对象
  20. 事件对象参数：要么传“事件对象”，要么不要传参数
  21. */
  22.       const ul = document.querySelector("ul")
  23.       ul.onclick = function (ev) {
  24.         console.log(ev.target.textContent)
  25.         console.log(ev.currentTarget === this) //true
  26.         console.log(ev.currentTarget)
  27.         console.log(this)
  28.       }
  29.       //   事件委托:事件主体不是主体元素
  30.       /* 
  31.     事件主体：有2部分组成
  32.     1。事件绑定主体:被添加了事件属性的元素  <ul>
  33.         this=== ev.currentTarget
  34.     2。事件触发的主体:用户实际点击的元素<li>
  35.         ev.target
  36.     */
  37.     </script>
  38.   </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():禁用默认行为
  1.   <body>
  2.     <!-- 禁用表单提交的方式：
  3.     1. 在form 元素添加onsubmit事件属性禁止提交 onsubmit="return false"  -->
  4.     <!-- <form action="login.php" method="post" id="login" onsubmit="return false"> -->
  5.     <form action="login.php" method="post" id="login">
  6.       <label class="title">用户登录 </label>
  7.       <label for="email">邮箱：</label>
  8.       <input type="email" id="email" name="email" value="" autofocus />
  9.       <label for="password">密码：</label>
  10.       <input type="password" id="password" name="password" value="" />
  11.       <!-- 2. 在button 按钮的type默认属性修改成 button，也能禁用表单的提交行为 -->
  12.       <button type="submit">登录</button>
  13.       <!-- <button type="button">登录</button> -->
  14.     </form>
  15.     <script>
  16.       /* //submit事件：默认提交进执行
  17.        3. 通过添加事件方法来 禁止提交表单   事件方法可用前面的事件属性表示  */
  18.       /*  const form = document.forms.login
  19.       form.onsubmit = function () {
  20.         // alert("上传")
  21.         return false
  22.       } */
  23.       /*
  24.      禁用表单提交行为，是为了用户自定义提交行为
  26.      4.禁用默认行为：  ev.preventDefault()
  27.       */
  28.       document.forms.login.onsubmit = function (ev) {
  29.         //禁用默认行为
  30.         ev.preventDefault()
  32.         //禁用冒泡
  33.         ev.stopPropagation()
  34.         //当表单事件的默认行为被禁用后， this===ev.target===ev.currentTarget
  35.         console.log(this)
  36.         console.log(ev.target)
  37.         console.log(ev.currentTarget)
  39.         //表单中的任何一个控件，都有一个form属性，永远和当前表单元素绑定
  40.         console.log(ev.currentTarget.email)
  42.         //禁用默认提交行为后，我们可以对表单控件的内容进行验证操作
  43.         //获取到email
  44.         const email = this.email.value
  45.         //获取 password
  46.         const password = this.password.value
  47.         // 对 email和password非空验证
  48.         if (email.length === 0) {
  49.           alert("邮箱不能为空！")
  50.           return false
  51.         } else if (password.length === 0) {
  52.           alert("密码不能为空！")
  53.           return false
  54.         }
  55.       }
  56.     </script>
  57.   </body>

8/12复习了表单事件

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

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

ev.preventDefault();

}

​

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post