DOM events: DOM level events, DOM event streams, DOM event model, DOM event capture process, custom event

Just ask the front end of the interview to the event, it will certainly be a DOM event;
if the answer came out, would have been downward extension application, in fact, these things are very simple, but when I first asked, is ignorant of;

DOM Event Level:
DOM0 element.onclick = function () {}
DOM1 is generally only design specifications, with no design things related to the event; therefore skip
the DOM2 element.addEventListener ( 'the Click', function () {}, to false)
the DOM3 element.addEventLIstener ( 'keyup', function ( ) {}, false)

DOM3 on the basis of DOM2 participated in many event types;

DOM2, DOM3 the third parameter, said: This event triggered capture phase (true), the trigger for the bubbling phase (false)

DOM event model:
is a normal event capture and bubbling
bubbling up and down capture

DOM event flow:
the flow of events is this: the browser is doing for this page interaction with the user process (for example, I clicked on the left mouse button) How will the left be reached on the page, but also how to respond;

A total of three stages: Capture -> target stage -> bubbling
event by capturing the target element to reach this stage as the target stage; from the target element and then uploaded to the window object that is bubbling phase

DOM event capture process:
a first event will be window capture, that the capture process:
window -> the Document -> HTML -> body -> ... -> target element

. 1    <style>
 2      #ev {
 . 3        background: LightBlue;
 . 4        width: 200px;
 . 5        height: 200px;
 . 6        TEXT- align = left: Center;
 . 7        Line- height: 200px;
 . 8      }
 . 9    </ style>
 10    <div ID = " EV ">
 . 11      target element
 12 is    </ div>
 13 is    <Script>
 14      var EV = document.getElementById ( 'EV' );
 15      // for event capture process can exhibit, when used herein event capture trigger 
16      window.addEventListener ( 'the Click', function() {
17       console.log('window capture');
18     }, true)
19 
20     document.addEventListener('click', function() {
21       console.log('document capture');
22     }, true)
23 
24     document.body.addEventListener('click', function() {
25       console.log('body capture');
26     }, true)
27 
28     ev.addEventListener('click', function() {
29       console.log('ev capture');
30     }, true)
31   </script>

 

 

 

Common applications of the Event object:
event.preventDefault ()
to prevent the default behavior of elements (such as links jump)

event.stopPropagaation ()
to prevent further spread of the capture and bubbling phases in the current event.

event.stoplmmediatePropagation ()
prevent the event from bubbling and prevent other listeners same event is called.
NOTE: If there are multiple events of the same type of event listener function to bind to the same element, when this type of event is triggered, they will be executed in the order added. If one listens to perform the function event.stopImmediatePropagation () method, the remaining elements of the current monitor function will not be executed.

event.currentTarget (element event of the currently bound) event.target (currently clickable elements)
both are generally put together to ask:
Note: Event agency: the same event handle elements are placed in the parent element on, so long as a binding can be achieved using multiple elements. In such a case, you need to judge in the end is which sub-element was clicked; here we must use event.target.

Custom Event :
This is part of the advanced, general asked here, you'll stay stable; will often be used in the actual development.

 

    var eve = new Event('custome');
    ev.addEventListener('custome', function() {
      console.log('custome capture');
    })
    ev.dispatchEvent(eve);