2020-08-02 WebStorage benefits of html + pointer-event of css + binding of JS dynamic loading event of li + front-end error classification and capture of soft skills

2020-08-02 Source of topic: http://www.h-camel.com/index.html

[html] What are the benefits of H5's Web Storage

WebStorage is a Web storage technology proposed by H5 that is different from cookies. It overcomes some limitations caused by cookies and stores a large number of data mechanisms that can exist across sessions.

The application scenario of cookies is the storage of data between the browser and the server. The size, quantity, and length of cookies are limited, which is limited to the browser. WebStorage is a local storage technology of information, and the applicable data needs to be strictly controlled on the client side without mentioning the scenario of the server.

[css] Give examples to illustrate the practical use of pointer-events

1. Click to penetrate pointer-event: none; //Allow, that is to disable mouse events pointer-event: auto; //Prohibit

2. Prevent repeated click events, such as obtaining a verification code, and setting that you cannot click again within a certain period of time 

3.pointer-event:none; //You can prohibit page jumps of tags

4.pointer-event:none; //If the element is absolutely positioned, then its underlying elements can be selected

5.pointer-event:none; //Only mouse events can be disabled, events bound in other ways will also be triggered

6. If the child element of an element is pointer-event: auto; then when the child element is clicked, the event of the parent element will be triggered in the form of event bubbling

[js] How to bind events to dynamically loaded li

Scenario: When loading the document, the li tag does not exist, so the li loading event cannot be given. The event flow includes capture, target stage, and bubbling. The best way is to let the parent element to find the child element. The li tag will be passed during the bubbling phase, and it can be obtained at this time.

Solution: on() function provided by jquery

$('.main-content').on('click', 'li', function(e) {
        alert(this);
    });

ps: $(parent class selector).on("event","subclass selector", processing function)

[Soft skills] What are the classifications of front-end errors? Catch these errors?

1. Front-end special error https://blog.csdn.net/qq_25243451/article/details/78811776

2. Front-end error handling https://segmentfault.com/a/1190000015567273

3. Front-end error capture https://www.cnblogs.com/cythia/p/11093231.html

Guess you like

Origin blog.csdn.net/vampire10086/article/details/108341253