The concept of the event:
In HTML and javascript interaction is achieved through event-driven, such as a mouse click event, the page scroll event onscroll etc., can add an event listener to a document or document element to book events.
Want to know at what time the event is called, you need to know about the concept of "event flow".
What is the flow of events:
1, DOM event flow,
Event stream consists of three phases:
1, event capture stage.
2, in the target stage. (The current event phase)
3, the event bubbling phase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
<script>var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function () {
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click', function () {
console.log('btn bubbling stage in the event ' );to false
},);
document.addEventListener ( 'the Click', function () {
the console.log ( 'event capture phase in Document' );
}, to true );
document.addEventListener ( 'the Click', function () {
the console.log ( 'in Document event bubbling phase ' );
}, to false );
document.documentElement.addEventListener ( ' the Click ', function () {
the console.log ( ' event capture phase in HTML ' );
}, to true );
document.documentElement.addEventListener ( ' the Click ', function () {
the console.log ( 'HTML bubbling stage in the event' );
}, to false );
document.body.addEventListener ( 'the Click', function () {
the console.log ( 'body in the event capture phase' );
}, to true ) ;
document.body.addEventListener ( 'the Click', function () {
the console.log ( 'body in the event bubbling phase' );
}, to false );
</ Script>
</ HTML>
effect:
understanding:
First, event capture process, document the object first receives the click event, then turn down the event along DOM tree, it has been spread to the actual target of the event. Btn is the id of the label.
Followed by bubbling in the course of events, the start time is received by the particular element (a label), then progressively spread up to the topmost node.
Note that when the target is not captured div stage