Event bubble and capture in JavaScript

Program 1 Jia 2021-02-23 00:20:41
event bubble capture javascript

Event bubble and event capture

cause : Today, I'm encapsulating a bind Function , Find out el.addEventListener The function supports the third parameter ,useCapture: Whether to use event capture , I feel a little fuzzy

Js Flow of events

Which part of the page has a particular event , Example : Draw a set of concentric circles on the paper , If you put your fingers on concentric circles , So it's not a circle , It's all the circles on the paper . On the page, too , If you click a button , Also click the container element of the button , Even click on the whole page

Flow of events : The order in which the page receives events ,IE and Netscape Two concepts were put forward at the beginning , Two kinds of event bubbling flow , Event capture flow

Click me


Event Bubbling (event bubbling)

IE The proposed event handling method , At the beginning of the event , Received by the most specific element , Then it propagates up to the unspecific nodes

If you click... In the example div Elements , So this click The sequence of events spread is as follows :div -> body -> html -> document in other words ,click First of all, the event will be div Trigger on element , This element is what we click on , then click Events will follow DOM The trees spread up , It happens at every level of the node , Until it spread to document object

All browsers support event bubbling , But there will be some differences in the specific implementation , for example IE5.5 And earlier versions of event bubbling will skip Html Elements , Directly from body Jump to the document Elements , and IE9,Firefox,Chrome,Safari Then bubble the event all the way to window object

Event capture (event capturing)

Netscape The net well team has another kind of event flow called event capture , The idea of event capture is that less specific nodes should receive events earlier , And the specific node should finally receive the event , The purpose of event capture is to capture an event before it reaches its expected goal , If you still take the above example , single click div So the trigger sequence would be like this document -> html -> body -> div In the event capture process ,document Object first receives click event , And then events along DOM The trees go down in turn , All the way to the actual goal of time, that is div Elements

although Netscape It's about developing this flow of events , But now all the newer browsers support this event flow model , Even though “DOM2 Level event ” The specification requires that events should be from document Objects start to spread , But these browsers are all from window Object starts capturing Events

Because older browsers don't support , So event capture is rarely used , It is recommended to use the event bubbling , Use event capture when there are special needs

DOM Flow of events "DOM2 Level events " What is? DOM2 There are three stages in the flow of events defined by the level

The event capture phase is in the target phase and the event bubble phase

The event is not at the target , Events are delivered from large to small , From the outside down DOM The tree passes , Trigger sequence , From the outside to the inside, in the goal stage : The event occurs on the target element , And in the event processing, it can be called a part of the bubbling stage : The event starts with the target element , Along DOM The trees pass out , Go to the parent container ,body,html,document Some browsers will arrive at window

What is? DOM2 Level ? What is? DOM0 Level ? What is? DOM Event handler level

event : An action performed by the user or the browser itself , for example click,load,mouseover It's all the names of the events , And the function corresponding to an event , It's called an event handler , The event handler is named after on start , for example click The event handler is onclick,load The way to deal with the incident is onloadHTML Event handler some html Element supports some kind of event , You can use a... With the same name as the corresponding time handler html Property to specify , The value of this property is executable javascript Code , for example



This event is triggered by : The bubbling phase triggers

DOM0 Level event handler html Event handler Of javascript Logic and html Too much coupling

DOM0 Level event handler

var btn = document.getElementById('myBtn')

btn.onclick= function(){


} Zhengzhou professional stream of people hospital http://www.hnzzxb.com/

Here this It points to this trigger element , And through this Object to access any attributes and methods of an element , Event handlers added in this way are handled during the bubbling phase of the event flow

Remove event monitoring : btn.onclick = nullDOM2 There are two methods of level event handler :addEventListener and removeEventListener be-all DOM The node contains both methods , And take three parameters , Event name to process , Function as an event handler and a Boolean value , Finally, if this Boolean value is true, Indicates that the event handler is called during the capture phase , If it is false Call the event handler during the bubbling phase

And the order of event flow is capture - The goal is - Bubbling , The capture phase is before the bubbling event is handled , So instead of true It may affect the normal time sequence

demo as follows :

var btn = document.getElementById('myBtn')



},false) How much is circumcision in Zhengzhou http://www.zztjxb.com/

DOM2 The advantage of adding event handlers with the level method is that you can add multiple event handlers , The first two replace the event handler , Because there's only one attribute , And the method of the element will also override

But it also means , Event handlers cannot be removed by rewriting , So pass removeEventListener To remove the event handler , And anonymous functions cannot be removed

Most of the time , Both add event handlers to the bubbling phase of the event flow , In this way, all kinds of browsers can be compatible to the maximum extent , It's best to add an event handler to the capture phase only when you need to intercept an event before it reaches the target , If it's not particularly necessary , Registering event handlers in the time capture phase is not recommended

IE Event handler

IE In this way, we can realize the connection with DOM Two similar methods in attachEvent and detachEvent, But only two parameters are accepted , One is the name of the event handler and the event handler function , because IE8 And earlier versions only support event bubbling , So pass attachEvent Any added event handler will be added to the event bubbling phase

It should be noted that :

1.attachEvent and DOM The main difference is in the scope of the event handler ,DOM0 Level will be in the scope of the element to which it belongs , and attachEvent The event handler runs in the global scope , So in attachEvent In the added function ,this Point to window

2.attachEvent When adding multiple events , Not in the order of addition , But in reverse order , Add , Execute first


el.addEventListener The third parameter problem of the function is solved , Use this method to represent the binding DOM2 Level event listener , It can be specified repeatedly , The third parameter indicates whether the event is handled in the capture phase , Capture -》 The goal is -》 Bubbling

The third parameter defaults to false, If there is no special case, it is not recommended to use the time processing program in the capture phase

本文为[Program 1 Jia]所创,转载请带上原文链接,感谢

  1. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  2. Vue-Cli 创建vue3项目
  3. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  4. 使用NTLM的windows身份验证的nginx反向代理
  5. Rust教程:针对JavaScript开发人员的Rust简介
  6. 使用 Serverless Framework 部署个人博客到腾讯云
  7. #研發解決方案#易車前端監控系統
  8. Vue changes localhost to IP address and cannot access
  9. JavaScript进阶学习
  10. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  11. Vue:vuex状态数据持久化插件vuex-persistedstate
  12. Vue source code analysis - start
  13. Vue -- the child component calls the method of the parent component and passes parameters --- props
  14. React-Native 获取设备当前网络状态 NetInfo
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  17. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  18. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  19. Why Vue uses asynchronous rendering
  20. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  21. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  22. 算法题:两数之和——JavaScript及Java实现
  23. 高性能 Nginx HTTPS 调优
  24. Why Vue uses asynchronous rendering
  25. day 31 jQuery进阶
  26. day 30 jQuery
  27. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  28. Why are more and more people learning front end?
  29. What do you do with 4K front-end development?
  30. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  31. What is the annual salary of a good web front end?
  32. Front end novice tutorial! How to get started with web front end
  33. Will the front end have a future?
  34. Is the front end hard to learn?
  35. Seven new Vue combat skills to improve efficiency in 2021!
  36. Is front end learning difficult?
  37. How about the process of Web front-end development and self-study?
  38. Front end learning route from zero basis to proficient
  39. What is the basis of learning front end?
  40. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  41. An inexperienced front-end engineer, what are the common problems when writing CSS?
  42. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  43. Springboot starts http2
  44. Enabling http2.0 in spring boot
  45. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  46. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  47. vue.js Error in win10 NPM install
  48. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  49. Springboot starts http2
  50. Vue event bus
  51. JQuery easy UI tutorial: custom data grid Pagination
  52. Using okhttp and okhttpgo to obtain onenet cloud platform data
  53. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  54. HTTP 1. X learning notes: an authoritative guide to Web Performance
  55. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  58. Event bubble and capture in JavaScript
  59. The root element is missing solution
  60. Event bubble and capture in JavaScript