Talk about JS event delegation

Talk about event delegation

Event delegation:

The event is the event we usually bind.
The delegate is not bound to the current element, but bound to the parent or ancestor element. Through the target property of the event event object, the precise element currently clicked can be obtained.

Principle: The principle of bubbling is used.

advantage:

1. Reduce the for loop, reduce the number of binding events, and reduce the probability of memory leaks.
2. You can bind events to future elements.

Prevent default events and prevent propagation

Block default events:
Mainstream:

1. e.preventDefault()
2. IE:e.returnValue = false;

Stop spreading:
Mainstream:

1. e.stopPropagation()
2. IE:e.cancelBubble=true

Analyze offsetX clientX screenX pageX separately

offsetX: The distance from the event location to the edge of the target element.

clientX: The distance from the location of the event to the edge of the browser's viewport.

screenX: The distance from the location of the event to the edge of the computer screen.

pageX: The distance from the event location to the edge of the document (ie8 is not compatible).

Generate random decimals of [10,80] by handwriting

document.write(Math.random()*70 + 10 + '</br>');
// 1. 10 + 70 = 80，这是 10~80之间。两数相加一定要等于最大的那个要求的数，这里就是等于80。
// 2. 10 表示从 10 开始。

Random integers of [10,80] generated by handwriting

document.write(parseInt(Math.random()*70 + 10 + '</br>'));

Generate a current time 7 days later

var date = new Date();
date.setDate(date.getDate()+7);
document.write(date);

Common H5 labels and their corresponding meanings

1. header: Used to define the header (head) of the document (web page or a certain paragraph).
2. footer: The footer tag represents the bottom area (footer) of a web page or chapter content.
3. article: In a table document, page, or program, the content that can be independently and completely quoted externally.
4. nav: Indicates to provide navigation links in the current document or other documents.
   Static navigation: nav>a
   dynamic navigation:nav>ul>li>a
5. section: A section is an independent area in html (mainly for web page segmentation). It has no other semantics and generally contains an independent title.
6. aside: Sidebar, which represents an area that is almost irrelevant to the content of the rest of the page.