Today, the comparison system has learned JavaScript event systems.
Event stream
JavaScript events exist in the form of a stream. An event will have multiple elements responding at the same time. Sometimes this is not us
We only need a specific element to respond to our binding event.
Event category
Capture event (non-IE) and bubble event (supported by all browsers)
Capture events are top-down, while bubble events are bottom-up. I will use a picture below to express it intuitively:
We may encounter many bubble events at work, but how can we execute the captured events? If we want to use non-IE browsers
To create a capturing event, set the third parameter of addEventListener to true.
Example: Link
The elements whose IDs are p1 and p2 are bound with the event handler function in the capture phase, as shown in the following code:
When you click # p1 (blue area), alert will output "p1 ″
When you click # p2 (yellow area), alert should first generate "p1" and then alert generate "p2", because in the event capture phase, events are propagated downward from the root element. # p1 is the parent element of # p2. click events bound to # p1 are executed prior to click events on # p2.
Example of a bubble event:
The Code is as follows:
Bubble event
