JS: event flow

Enjoy 2021-05-03 18:23:05
js event flow

Event bubbling and event capture and event broker

Reference blog

Reference blog

One . DOM Flow of events

 Event flow diagram

1. Event flow process

  • Element event response in DOM From the top of the tree Window Start “ flow ” Target element (), And then from the target element “ flow ” top-level Window.
  • because Window Objects are directly user oriented , Then the user triggers an event , Like the click event , It must be window The object begins with , So nature is catching first and then bubbling

2. Stage

  1. Capture phase
    • The capture phase refers to the event response from the outermost Window Start , Step by step to the inside , Until the specific event target element . In the capture phase , Bubbling events registered in response elements are not handled .
  2. Target stage
    • The target phase is the lowest element that triggers the event , As shown in the figure above .
  3. bubbling phase
    • The bubbling phase is the opposite of the trapping phase , The response of an event is passed from the bottom layer to the outermost layer Window.

Two . Set up event bubbling and event capture

  • element.addEventListener(type, listener, useCapture)
    // type: Listen for a string of event types
    // listener: Event listening callback function , That is, the function to be processed after the event is triggered
    // useCapture: The default value is false, It means the event is bubbling ; Set to true when , Represents event capture
     Copy code 
  • <div id="div1">
    <p> I'm the outermost div</p>
    <div id="div2">
    <p> I'm in the middle div</p>
    <div id="div3">
    <p> I'm the innermost div</p>
     Copy code 
  1. Bubbling

  •  Set the third parameter to false
     Copy code 
  1. Capture

  • var a = document.getElementById("div1");
    var b = document.getElementById("div2");
    var c = document.getElementById("div3");
    () => {
    alert(" I'm the outermost div");
    () => {
    alert(" I'm in the middle div");
    () => {
    alert(" I'm the innermost div");
     Copy code 

3、 ... and . Event Bubbling (event bubbling)

1. Concept

  • Microsoft came up with a proposal called Event Bubbling (event bubbling) Event flow for , Respond from the inside out

2. Stop the event from bubbling

1. Set... For child elements .stopPropagation()
  • // Set... For child elements .stopPropagation()
    function click3(e) {
    alert(" I'm the innermost div");
    var e = event || window.event;
     Copy code 
  • event.stopPropagation() Only prevent the event from bubbling up , Don't stop the event itself

2. event.target==event.currentTarget, Make the element that triggers the event equal to the element that binds the event , It can also prevent events from bubbling ;
  • // Be careful , If you use this method to prevent events from bubbling , This method must be used for all elements within the bubble influence range
    function click1() {
    var e = event || window.event;
    if (e.target == e.currentTarget) {
    alert(" I'm the outermost div");
    function click2() {
    var e = event || window.event;
    if (e.target == e.currentTarget) {
    alert(" I'm in the middle div");
    function click3() {
    var e = event || window.event;
    if (e.target == e.currentTarget) {
    alert(" I'm the innermost div");
     Copy code 

Four . Event capture (event capturing)

1. Concept

  • Netscape came up with the name Event capture (event capturing) Event flow for , Response from outside to inside

5、 ... and . Event agent

1. Concept
  • Event broker is to use the mechanism of event bubble or event capture to bind a series of inner element events to outer element events
2. effect , Reduce the number of listeners , Get rid of repetitive and cumbersome code
  • <ul id="item-list">
     Copy code 
  • var items = document.getElementById('item-list');
    // Event capture implements event broker
    items.addEventListener('click', (e) => {console.log(e.target.innerHTML)}, true);
    // Event bubbling implements event proxy
    items.addEventListener('click', (e) => {console.log(e.target.innerHTML)}, false);
     Copy code 
  • Click through the event agent li Print the corresponding information


  1. 浅谈 React 中的 XSS 攻击
  2. XSS attack in react
  3. 自学前端教程整理,附不容错过的前端100篇文章合集
  4. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  5. 使用OpenTracing跟踪Go中的HTTP请求延迟
  6. Using opentracing to track HTTP request latency in go
  7. Encapsulating databinding allows you to write less than 10000 lines of code
  8. 03-HTML5标签-HTML5极速入门
  9. 03-html5 tag-html5 quick start
  10. LayUI - 极易上手拿来即用的前端 UI 框架
  11. Layui - easy to use front end UI framework
  12. Interpretation of lodash source code (1)
  13. Why is the first parameter of node family callback error?
  14. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  15. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  16. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  17. How to set up hyperlinks inside the website?
  18. Using node and socket to realize online chat room
  19. The core competitiveness of Vue: data bidirectional binding
  20. React configuration agent
  21. CSS layout
  22. Application scenario explanation of Vue dynamic component
  23. Redux learning notes 04 -- using multiple reducers to manage data
  24. After three months of typescript writing, what have I learned?
  25. Node family - what is a callback?
  26. React -- a simple implementation of render & create element
  27. JS learning simple usage of jquery
  28. Seamless love
  29. 小白前端入门笔记(12),设置哑链接
  30. Small white front-end entry notes (12), set dumb links
  31. Vue2. X opens composition API and TSX
  32. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  33. Flex learning notes
  34. The most essential closure article in the eastern hemisphere
  35. 2021-05-03 hot news
  36. Sword finger offer -- reverse order pair in array (JS Implementation)
  37. Working process of scaffold
  38. Use decorator mode to strengthen your fetch
  39. [JS] scope (Introduction)
  40. Employment information statistics network (interface document)
  41. Analysis of MVC
  42. [middle stage] please stay and join me in the backstage
  43. Understanding front end garbage collection
  44. [continuous update] front end special style implementation
  45. Flutter product analysis and package reduction scheme
  46. XPath positioning
  47. 前端开发css中的flex布局的使用
  48. The use of flex layout in front end development CSS
  49. JQuery核心函数和静态方法
  50. JQuery core functions and static methods
  51. Node family - understanding of blocking and non blocking
  52. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  53. Vue source code analysis (2) initproxy initialization proxy
  54. What's TM called react diff
  55. Summary of common front end data structure
  56. Useeffect in hooks
  57. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  58. Front end notes: virtual Dom and diff of vue2. X
  59. The best code scanning plug-in of flutter
  60. The simplest plug-in for rights management of flutter