There are three levels of DOM events

DOM level 0 events
DOM0 level time can be divided into two types: one is to directly add execution statements in the tag, and the other is to define execution functions.

<input type="text" id="test">
<input type="button" value="button" onclick="alert(document.getElementById('test').value)">

<script>
        document.getElementById('button').onclick=function(){
            alert(document.getElementById('test').value);
        }
</script> 

DOM Level 2 events

First parameter: event name
Second parameter: execute function
The third parameter: Specifies whether to bubble or capture. The default is false and bubble.

element.addEventListener('click',function(){},false)

DOM Level 3 events
Like the DOM 2 level, it just adds more event types, mouse events and keyboard events.

element.addEventListener('keyup',function(){},false)

As long as you can answer the DOM event level, you won't ask too many questions or ask questions to do it.

There are two types of DOM events

There are two types of events: event capture Event Bubbling .

Event capture is from the outside to the inside, starting from the vertex of the event, looking down level by level to the target element.
Event bubbling is triggered from the specific target node element from inside to outside, and passed up level by level to the root node.

Refer to the following figure for the specific process:

Event flow of DOM events (event propagation)

Event flow is the process of event propagation.
The complete event flow of DOM includes three stages: event capture stage, target stage and event bubble stage.
The event reaches the target element through capture, and this time is the target stage. The process of uploading events from the target node element to the root node is the third stage, the bubbling stage.
Corresponding to the above figure, I have my own experience.

Specific process of event capture

When an event occurs on a DOM element, it does not occur entirely on that element. In the capture phase, the event starts from the window, followed by the document object, to the element that triggers the event.

We use code to demonstrate the whole capture process.

<div id="dom">
    <style media="screen">
      #dom{
        width: 300px;
        height: 100px;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 100px;
      }
    </style>
    Target element
</div>
<script type="text/javascript">
    var dom = document.getElementById('dom');

    dom.addEventListener('click', function (e) {
        console.log('this div');
    }, true);

    window.addEventListener('click', function (e) {
        console.log('this window');
    }, true);

    document.addEventListener('click', function (e{
        console.log('this document');
    }, true);

    document.documentElement.addEventListener('click', function (e) {
        console.log('this html');
    }, true);

    document.body.addEventListener('click',function (e) {
        console.log('this body');
    }, true);
</script>

Specific process of event bubbling

When an event occurs on a DOM element, it does not occur entirely on that element. In the bubbling phase, the event bubbles, or the event occurs in its parents, grandparents, until it reaches the window.

Common applications of Event object

<script>
      window.onload=function(){
          document.onclick=function (e) {
			//Get event object
			e = e || window.event;//Under IE and Chrome is window Under event FF is e
			//Get event source
			var target = e.target || e.srcElement;//Srclelement under IE and Chrome and target under FF  
			// Prevent default behavior
			if (e.preventDefault) {
			e.preventDefault();//Outside IE
			} else {
			e.returnValue = false;//IE
			//Note: this place cannot be replaced by return false
			//return false can only cancel elements
			}   
			//Prevent event bubbling    
			if (e.stopPropagation) {
			e.stopPropagation();//Outside IE
			} else {
			e.cancelBubble = true;//IE
			}
			     
          };
      };
  </script>

We can also customize events through new Event()

var eve = new Event('test'); //Create an event through new Event
dom.addEventListener('test', function () { //Registration event
    console.log('test dispatch');
});
setTimeout(function () {
    dom.dispatchEvent(eve);  //Trigger event
}, 1000);