zoukankan      html  css  js  c++  java
  • 前端中的事件流

      面试题中的一道题目。

      事件流:描述的是事件发生的顺序。

      包含的三个阶段:

    •     事件捕获阶段
    •     处于目标阶段
    •     事件冒泡阶段

    事件捕获阶段

    这是一个从上而下的过程,越高级的父级元素越早接到事件。

    例:

    1.  如点击li元素会先触发ul元素。

    注意:如果在li上绑定click事件,那么新添加的li元素不会有这个click事件。此时应该在ul上绑定事件,根据事件捕获的原理,事件会自上而下传递给li。通过event.target找到这个li元素。

    这种方式被称为事件委托。

    2.  目标元素有子元素。如希望绑定到li上,但li有子元素,则event.target变成了子元素。

    此时需要组织事件捕获的传递。这个时候可以给子元素添加css:  li>* {pointer-events:none;}

    jquery通过on方法解决了这个问题: $('ul').on('click','li',function(event){//code});

    事件冒泡

    让DOM树最底层的目标元素最先接收到事件,然后向上传递,是一个自下而上的过程。

    如button和button的父元素都添加了click事件,当点击button的时候,button和其父元素的点击事件都会执行,自下而上的顺序执行。这个事件需要阻止冒泡事件。

    解决方法:

    $('button').click(function(e){   //可以是任何需要阻止冒泡的元素。

       e.stopPropagation();

    //ie

      e.cancelBubble = true;

    })

    一些不支持冒泡的事件:

    blur:元素失去焦点时触发,不支持冒泡。

    focus: 元素获得焦点时触发,不支持冒泡。

    mouseenter:鼠标移入元素触发,不支持冒泡。

    mouseleave:鼠标移出元素时触发,不支持冒泡。

  • 相关阅读:
    C语言warning的收集和总结
    HLS:跑马灯实验
    HLS:OpenCV和RTL代码转换关系
    Zynq-7000 FreeRTOS(二)中断:串口Uart中断
    Zynq-7000 FreeRTOS(二)中断:PL中断请求
    Zynq-7000 FreeRTOS(二)中断:Timer中断
    xilinx DMA IP核(二) —— 文档阅读
    Zynq-7000 FreeRTOS(一)系统移植配置
    xilinx DMA IP核(一) —— loop测试 代码注释
    System Verilog基础(二)
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/7240077.html
Copyright © 2011-2022 走看看