Day32 JS note event (Part 1) September 27, 2021

Three elements of the event ： Event binding 、 Event type 、 Event function

Common handling ：

1. On the label or js In file dom Elements . event = function(){}

2.function fn(){} dom Elements .onclick = fn

        - Do not add parentheses after the function name Call and execute by yourself

Be careful ： Don't give... When submitting forms form Form binding click event , The form will be submitted by default After submitting, it is equivalent to refreshing the page and jumping to a new page In the form submit Method

Flow of events ：

- Capture phase : Start from the outermost layer of the code and look for the inner layer of the code , Is a process of finding binding events ( From the outside to the inside )

- Target stage : Reach the location of the target event Triggering event

- bubbling phase : From the target event to html Go back to the document again ( From the inner layer to the outer layer )      Browser default Events ！！

Event binding : The previous method of using event binding is on+ Event type This method can be used, but in special cases there are bug Of

- Events of the same type Bound to a tag Will appear bug The back covers the front

Monitor / The listener

grammar : dom Elements .addEventListener(' No addition on The type of event ', Event handler function(){

// Code snippet executed

}, Whether to execute in the capture phase - What is commonly used is false The default is in the bubbling phase )

a key :ele.addEventListener(type, handler) Remember to write Can solve on+ Of the type of event bug

  Listener binding ：

  Listener unbinding ：

  Event object ：

  Stop the event from bubbling ：

-- Purpose ： If there are multiple boxes nested Click on the smallest box to jump The existence of bubbles may affect the opening and jumping of the current page The outermost page will be opened for jump analysis So this situation does not meet my needs Prevent default bubbling behavior

To prevent a bubble : Event object

- stopPropagation() It's a method ( Stop spreading ) Can only be used in higher versions

- e.cancelBubble = true Use in lower versions

Methods to prevent browser default behavior ：preventDefault()