DOM day_ 03 (7.11) event bubbling mechanism, event delegation, to-do items, block default events, mouse coordinates, page scrolling events, create DOM elements, DOM encapsulation operations

One 、 Event bubbling mechanism

The bubbling mechanism of events : When an event occurs on a child element , Will be passed to its parent element
Stop spreading : Dependent on event parameters stopPropagation Method
Event triggered party elements : The event target attribute

purpose : In event delegation mode , It can handle the events of dynamically added sub elements

 

  Two 、 Event delegation

problem : Read original string After splicing , Get a new . Reset to ul Child elements
    We have added click events before li, All replaced . So it can't be clicked

For dynamic addition / Changing sub elements : You can add a click event to its parent element
Event delegation : Let the parent element help the child element complete the operation related to the event

  practice

  3、 ... and 、 To do list

 

  Four 、 Block default events

 a label with href attribute , When clicked, it will automatically jump to the page
  hope : by a Add click event to tag Instead of the default href Jump
  By default : Trigger first onclick Trigger again href Jump

  5、 ... and 、 Mouse coordinates

 

  6、 ... and 、 Event listener

In teamwork :
    Multi person collaborative development , If you use onclick Bind events by .   Once two people give the same element onclick The binding event , Then there is a conflict , Cover .
    demand : There will be no coverage , Can bind multiple events at the same time -- Event listener
   addEventListener   add add to event event listener Monitor
    Two parameters : Event name -- No on, Trigger function

One time trigger function ： removeEventListener

7、 ... and 、 Page scrolling Events

scroll: rolling .   Browser page scrolling event

document.documentElement.scrollTop || document.body.scrollTop： How to get the rolling distance Because of the browser compatibility problem, it is best to use two solutions

  8、 ... and 、 How attributes operate

  7、 ... and 、 establish DOM Elements

Conventional web development methods :
      use HTML Code build page -> Browser handle HTML It can be interpreted as DOM -> Show to browser
     HTML Code is syntax sugar , The purpose is to facilitate programmers to develop
    shortcoming : The browser needs to consume certain resources To convert   Text ->DOM object

extreme : If you want to pursue extreme performance , Can be abandoned HTML Code , Direct use JS Way to create DOM Elements , That is to omit the steps of browser parsing , Artificially implement parsing DOM operation , Simply put, it's a programmer's job   Replace the browser
             This idea is in Of the three frameworks React Carry forward in the future -- Facebook

Loop creation DOM Elements

Document fragment : A virtual container , Can temporarily store DOM Elements Not displayed on the page

8、 ... and 、DOM Package operation

     This package idea , Namely jQuery Thought , Using packaging technology , Put the original DOM simplified