This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

The main point of today’s content (event delegate)! Do do do

Can be used as a beginner’s learning route, can refer to, learning progress is not particularly catch up! Under continuous update

Combined with their own understanding, simple and comprehensive summary of JavaScript learning in the process of basic knowledge, convenient to deepen understanding!

Let’s get started! ‘Build on the foundation ‘! Come on! Take it seriously!

1, comb knowledge points

  • Events:

  • The event object: event | | evt

  • To stop events from bubbling: E.topPropagation? e.stopPropagation() : e.cancelBubble = true

  • Block the browser’s default behavior: E. preventDefault? e.preventDefault() : e.returnValue = false return false;

  • Mouse event object coordinates:

    • PageY distance document window
    • ClientY distance viewable window
    • offsetX  offsetY

  • Keyboard event key value: keyCode ctrlKey e.keyCode== 13&& e.trlkey

  • Flow of events:

    • Event bubble child – father
    • Event capture parent – child

  • Event listener: addEventListener

obj.addEventListener('click'.function () {}, true)
Copy the code

2. Event Delegation (key)

2.1 define

  • Delegate: Let someone else do it
  • Event delegate: Delegate an event to another element for execution

2.2 Benefits of delegation:

  • When the same event is added to multiple elements of the same element, the event can be added to the parent element of these elements by means of delegate, in order to improve the execution efficiency of the program
  • Dynamically created elements can be delegated to add events outside the body of the function that created the element

Use event delegation, must want to obtain the event source: the event object. The target | | event object. SrcElement compatible (written)

2.3 Delegation implementation mechanism:

  • Leverage event bubbling or capture mechanisms
  • Not all events can implement the event delegate onLoad onFocus Onblur

2.4 Delegate implementation:

The first: parent elements. Event =function(a){} Second: parent element. AddEventListener ("".function(){})Copy the code

3,json

  • What is JSON? JavaScript Object notation
  • Json object job: Store data exchange data
  • Json is a lightweight data storage format used primarily for data exchange between web clients and servers
  • Json object definition:
    • var json = { }
    • Json data consists of a key-value pair format
    • Strict JSON keys must be enclosed in double quotes
    • A strict JSON value cannot befunction(){}
var json = {
  sname: 'jack'.age: 17,}Copy the code

  • Json data read operation:

    • A json object. Key or JSON [” key “]

  • You must use for in to traverse a JSON object

4. Drag ideas

Step 1: Start by adding the mousedown event onMouseDown to the drag element

Records the internal offset from the dragged object when the mouse is pressed

disx = e.offsetX
disy = e.offset
Copy the code

Step 2: To make the object move, add the mouse movement event onmousemove.

Change the left and top values of the drag object as the mouse moves (make sure the drag object is positioned)

left = e.pageX - disx
top = e.pageY - disy
Copy the code

Step 3: To stop dragging, add the mouseup event onMouseup

Stop moving: Set onMousemove to NULL

document.onmousemove = null
Copy the code

5. Scroll family properties

  • scrollLeft: Gets the horizontal scroll distance of the page
  • scrollTop: Gets the vertical scrolling distance of the page
  • Obtaining method (compatible) :
    document.documentElement.scrollTop || document.body. ScrollTop is obtained in the onScroll eventCopy the code
  • Set the page rolling distance:
document.documentElement.scrollTop = document. The body. The scrollTop = valueCopy the code

Preview: Come on, dreamers

[Preview] : Next, learn regular expressions and start to contact the implementation of some requirements in real work

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period of time, consolidate the foundation, early into dafang!

It is not easy to insist, adhere to down is not easy, you really good!

Calm Down & Carry On!

Read more:

The previous article is updated and reviewed

【 Re-learn JS】 Study every day to consolidate the foundation:

[day1] js initial

[day2] Various operators,

[day3] Data type,

【day4】 Loop structure & Conditional Statement,

【day5】 Function (key),

[DAY6] Scope & Event,

【day7】 Object & Array method summary,

[day8] String methods & Partial sort,

【day9】Math object & Wrap function,

[DAY10] BOM- Browser Object Model,

【 DAY11 】DOM- Document Object Model,

【day12】Event Object

【day13】Event object

More on the way… A long way to go ==-.. – = =