1. navigator
userAgent: String containing browser name, kernel, version number
Despise: How to tell the browser name and version number
2. Timer: 2 types:
1. Periodic timer:
What is: Make a program perform a task repeatedly at regular intervals
When: Just let the program perform a task repeatedly at regular intervals
How To: 3 things:
1. Define the task function: the function that the timer calls repeatedly each time
2. Put the task function into the timer and start the timer:
var timer=setInterval(task, interval ms)
timer is the sequence number that uniquely identifies the timer, which is specially used to stop the timer
3. Stop the timer: clearInterval(timer)
2 types: 1. Manual stop:
2. Automatic stop: Determine the critical value in the task function, and continue to execute if the critical value is not reached. If the critical value is reached, clearInterval() is called automatically
2. One-time timer:
What it is: Makes the program wait for a period of time before delaying the execution of a task.
After executing once, it will stop automatically.
When: Whenever you want to delay execution of a program
How To: 3 things:
1. Define the task function: the task that the timer delays to execute
2. Start timer: start waiting
timer=setTimeout(task, wait ms);
3. Stop timer: stop waiting, no longer execute
clearTimeout(timer);
Timer principle:
1. When the timer is started, the task function will not be executed immediately. Just create a timer object and encapsulate the definition of the task function.
2. When the timer is executed, the task function will not be executed immediately, but the task function will be added to the callback queue to wait.
3. The task function in the callback queue will be executed only after the main program is executed.
Conclusion: The task function of the timer can only be executed after the main program is executed.
3. Events:
What is: A browser-triggered or user-triggered change in the state of a page's content
Event handler: a function that is automatically executed when an event occurs
When: When you want to automate a task when an event occurs
How to bind: 3 types:
1. In HTML: <ANY on event name="js statement"
Problem: Does not conform to the principle of separation of content and behavior, and is not easy to maintain
2. Dynamic binding in js: Assignment method:
elem.on event name=function(){
//this->current elem
}
Trigger event: elem.on event name();
Problem: An event property, only one handler can be bound
3. Dynamic binding in js: Add event listener method:
elem.addEventListener("event name", handler)
elem.removeEventListener("event name", handler)
Emphasis: removeEventListener must be exactly the same as what was written in addEventListener. Also, the original handler object must be found.
So: if a handler function might be removed, then when binding, you can't use anonymous functions. A named function must be used.
Event Model: The process through which an event occurs: 3 stages
1. Capture: from the outside to the inside, record the processing functions bound to the parent elements at all levels step by step
2. Target trigger: Priority triggers the processing function on the target element
Target element: The first element that originally triggered the event
3. Bubbling: From the inside to the outside, according to the reverse of the capture stage, trigger the processing functions on the parent elements at all levels.
Why: All browser developers believe that clicking on an inner child element is also equivalent to clicking on an outer element.
Event object:
What is: An object created automatically when an event occurs, encapsulating event information, and providing an API for manipulating event behavior.
When: 1. Get event information
2. Modify the default behavior of events
how:
Get: DOM: The event object is always automatically passed in as the first parameter of the handler
elem.onclick=function(e){
//When the event occurs, e will automatically get the event object
}
API:
1. Cancel bubbling/stop spreading:
e.stopPropagation()
2. Use bubbling:
Optimization: Minimize the number of event listeners:
Why: The browser triggers the event handler by traversing to find all listening objects. If there are many listening objects, the traversal will be slow.
When: When multiple child elements need to bind the same event handler
How To: Bind a handler only once on the parent element
question:
1. this no longer points to the target element, but to the parent element
2. Identify the target element
solve:
1. You can't use this, you should use e.target
e.target always saves the target element and does not change with bubbling
2. In the event processing function, first determine the characteristics of e.target (tag name, class...). Continue execution only if the target element meets the requirements
Without bubbling vs with bubbling:
1. Binding position: directly bind to each child element without using bubbling
Use bubbling to bind to the parent element
2. The number of monitors: Do not use more bubbling
Use less bubbling
3. Efficiency: No use of bubbling Low
Use bubbling high
4. For dynamically added new elements:
You can't automatically get event handlers without using bubbling
Use bubbling to automatically get the handler function on the parent element
3. Block default behavior:
Why: Browsers may add individual default behaviors for user experience reasons. The default behavior may conflict with the events we add
When: whenever you want to not trigger the browser's default behavior
Typical scenario:
1. When using a element as a button
2. You can also use the submit button to implement custom form submission:
Combination 1:
<input type="button" onclick() form.submit()
Combination 2:
<input type="submit"
form.onsubmit()
e.preventDefault();
3. Block the default behavior before using the drag and drop API in HTML5
How to: e.preventDefault();