What is an event?
When an HTML element generates an event,
the event will be propagated along the path between the element node and the root node, and all the
nodes the path passes will receive the event. This propagation process is called DOM event flow
What is event capture? (Netscape)
Event capture: Event capture will start from the document to trigger a level-by-level pass down, and trigger in turn until the real event target
Example of event capture sequence: document→ html→ body→ div→ button
What is event bubbling? (Microsoft)
Event bubbling: Event bubbling will be passed from the currently triggered event target level by level, and triggered in turn until the document
Example of event bubbling sequence, button->div->body->html->document
Catch first and then bubble,
But bubbling is the default, so add capture to the parent element.
block a tag: default event
e.preventDefault ()
vue2: .prevent
stop bubbling
even.stopPropagation();
view2: .stop
Use event capture
view:capture
Vue.js provides event modifiers for v-on to handle DOM event details, such as: event.preventDefault() or event.stopPropagation().
Vue.js invokes modifiers via directive suffixes denoted by a dot .
.stop- prevent bubbling.prevent- block default event.capture- use capture.self- Only listen for events that trigger the element.once- trigger only once.left- Left button event.right- Right click event.middle- middle wheel event