• js 事件流理解 && 阻止事件冒泡和默认行为


     

     

    第一:事件流:在页面接受事件的顺序。分两个阶段 1事件捕获阶段 2目标阶段 3事件冒泡阶段

        1事件捕获阶段:是从上而下查找如 document->html->body->div

        2目标阶段

        3事件冒泡阶段:是从下而上找(与上相反)

      addEventListenter有三个参数(事件,回调函数,boolean[false:冒泡--默认,true:捕获])

     

        父元素

       

          子元素

       

     

      事件捕获情况:

      点击子元素div情况下:

      let child = document.querySelector('.child')

      child.addEventListener('click',function(){

        alert('我是子元素')

      },true)//true捕获 从上而下 事件先打印父元素在打印子元素。

      let parent = document.querySelector('.parent')

      parent.addEventListener('click',function(){

        alert('我是父元素')

      },true)

      事件冒泡情况

      点击子元素div情况下:

       let child = document.querySelector('.child')

      child.addEventListener('click',function(){

        alert('我是子元素')

      },false)//false捕获 从下而上 事件都先打印子元素在打印父元素。

      let parent = document.querySelector('.parent')

      parent.addEventListener('click',function(){

        alert('我是父元素')

      },false)

    第二:阻止事件冒泡和默认行为

    div class="parent">

        父元素

       

          子元素

       

     

      1 阻止默认行为如下:

      阻止a标签跳转到www.jd.com

      var aa = document.querySelector('a')

      aa.addEventListener('click',function(e){

        //1 种

        e.preventDefault();

        //2 种 兼容性问题 老版本ie

       // e.returnValue = false;

        //3 种

        //return false;

      })

      2 阻止事件冒泡

        let child = document.querySelector('.child')

        child.addEventListener('click',function(e){

          alert('我是子元素')

          e.stopPropagation() //主要这句话

          //e.cancelBubble = true //兼容性老版本ie 取消冒泡

        },false)//冒泡行为默认是false 可以不写 false

      let parent = document.querySelector('.parent')

      parent.addEventListener('click',function(){

        alert('我是父元素')

      },false)

  • 相关阅读:
    React Hooks、useState、useEffect 、react函数状态
    golang--module
    Java基础(六)
    解锁高效检索技能:掌握MySQL索引数据结构的精髓
    .NET开源的简单、快速、强大的前后端分离后台权限管理系统
    手撕JavaScript面试题
    node运行项目-Network: unavailable-没有ip地址
    C# 排序的多种实现方式(经典)
    微机保护装置智能操控及无线测温等产品在某助剂厂新建项目的应用
    【Python零基础入门篇 · 34】:进程间的通信-Queue、进程池的构建
  • 原文地址:https://blog.csdn.net/m0_65730686/article/details/126140161