当前位置：网站首页>Description of event flow

Description of event flow

2022-06-30 09:56:00 【zimingyo】

Event flow and two-stage description

Flow of events ： It refers to the flow path during the complete execution of the event
Two phases ： Capture phase （ Father to son ） And bubbling stage （ Son to father ）

Event capture and event bubbling

Event Bubbling

  • Concept ： When an element's event is triggered , The same event will be triggered in turn in all the ancestor elements of the element .
  • Simple understanding ： When an element triggers an event , All parent elements will be called up in turn Events of the same name （ It means that the trigger event type is the same ： A fellow click）
  • Event bubbling exists by default
    Event capture
  • Concept ： from DOM The root element of starts to execute the corresponding event （ From the outside to the inside ）
  • Event capture needs to write corresponding code to see the effect
  • Code DOM．addEventListener( Event type , Event handler , Whether to use capture mechanism )
  • explain ：
    addEventListener The third parameter is passed in true The capture phase triggers when representing （ Rarely used ）
    If the incoming false Indicates that the bubbling phase triggers , The default is false
    If used L0 Event monitoring , Then there is only the bubbling stage , No capture

Stop the flow of events

  • Because there is a bubble mode by default , Therefore, it is easy for events to affect parent elements
  • If you want to limit the event to the current element , You need to stop the flow of events
  • To stop the flow of events, you need to get the event object
  • grammar ： Event object .stopPropagation()
  • This method can block the flow and propagation of events , Not just in the bubbling phase , The capture phase is also effective .

Mouse over event ：

  • mouseover and mouseout There will be bubbling effect
  • mouseenter and mouseleave No bubbling effect

Blocking default behavior ： For example, clicking a link does not jump , Form field cannot be submitted
grammar ：e.preventDefault()

The difference between the two registration Events
Tradition on register （L0）

bt.οnclick=function(){}
  1. Same object , The events registered later will overwrite the events registered earlier 
<body>
<button> Click on </button>
<script> let bt=document.queryselect('button') bt.onclick=function(){
       alter(11) } bt.onclick=function(){
       alter(12) } // The execution result is 12 </script>
</body>
  1. Use it directly null The event can be unbound by overwriting 
bt.οnclick=null
  1. It's all performed in the bubbling phase

Event listening registration （L2）

bt.addEventListener('click',function(){})

bt.addEventListener(‘click’, Function name )

function  Function name （）{}
  1. grammar ：addEventListener( Event type , Event handler , Whether to use capture ) [true It's capture ,false It's bubbling （ Default ）]
  2. The events registered later will not overwrite the events registered earlier （ The same thing ）
  3. The third parameter can be used to determine whether it is in the bubble or capture phase
  4. You have to use removeEventListener( Event type , Event handler , Whether to use capture )
bt.addEventListener('click',add)
function add(){
alter(35)
}

bt.removeEventListener('click',add)
// Can't get 35
  1. Anonymous functions cannot be unbound （ For the second form ）
原网站

版权声明
本文为[zimingyo]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206300914332235.html

边栏推荐

猜你喜欢

随机推荐