In every decade of history, heresies have been labeled in order to stamp them out before people can even begin to wonder if they are true. — From the chapter “Hackers and Painters” : What can’t be said

DOM events

  • The HTML DOM allows JavaScript to react to HTML events:
  • Examples of HTML events:
    • When the user clicks the mouse
    • When the page loads
    • When the image loads
    • When the mouse moves over an element
    • When an input field is changed
    • When an HTML form is submitted
    • When the user hits a button

The Event object

  • The Event object represents the state of the Event, such as the element in which the Event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
  • Events are usually used in conjunction with functions, which are not executed before the event occurs!

Basic concept: the level of DOM events

| | grade level of event | | — – | — — — — — — — — — — — – | — — — — — — — — — — — – | | DOM0 | element. The onclick = function () {} | | DOM2 | element.addEvenListener(‘click’, function(){},false) | | DOM3 | element.addEvenListener(‘keyup’, function(){},false) |

DOM event flow model

Describes the specific flow of DOM event capture

Window –> document –> HTML –>body –>… (Passed layer by layer in DOM structure) –> Target element

Common uses of the Event object

  • Enent.perventdefault () // Prevents default behavior
  • Event.stoppropagation () // Prevents bubbling
    • The method acts on subsequent nodes to stop executing event handlers for all subsequent nodes after all event handlers bound to the current element have been executed
  • event.stopImmediatePropagation()
    • The method acts on subsequent nodes to stop executing event handlers for all subsequent nodes after all event handlers bound to the current element have been executed
  • event.currentTarget()
    • Often used with event delegates to represent the element currently clicked
  • event.target
    • The currently bound event

Custom events

var touchEvent = new Event('custome');
dom.addEventListener('custome',function(){
  console.log("custome")
});
dom.dispatchEvent(touchEvent);
Copy the code

CustomEvent is another CustomEvent method

  • Summary: Custom events (when you don’t want to use callbacks)
    • CustomEvent Specifies the event name + parameter
    • “Event” cannot be used with parameters

Capture the process code demo

  • The order of capture is independent of the order in which the code is written
<div id="ev">
    <style media="screen">
        #ev {
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>The target element</div>
<script type="text/javascript">
    var ev = document.getElementById('ev');

    ev.addEventListener('click'.function (e) {
        console.log('ev captrue');
    }, true);

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

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

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

    document.body.addEventListener('click'.function (e) {
        console.log('body captrue');
    }, true);
  
  // Click print order
  /* window capture document capture html capture body capture ev capture */
</script>
Copy the code

Custom event code demo

Var eve = new Event('test'); ev.addEventListener('test', function () { console.log('test dispatch'); }); setTimeout(function () { ev.dispatchEvent(eve); }, 1000);Copy the code

Commonly used events

Onload and onUnload events

  • Onload and OnUnload events are triggered when the user enters and leaves the page.
  • The onLoad event can be used to detect a visitor’s browser type and browser version, and then load the appropriate version of the web page based on that information.
  • The onLoad and onUnload events can be used to handle cookies.
<body onload="checkCookies()">
Copy the code

Onchange event

  • The Onchange event is often used in conjunction with input field validation.
  • Here is an example of how to use onchange. The upperCase() function is called when the user changes the contents of the input field.
<input type="text" id="fname" onchange="upperCase()">
Copy the code

Onmouseover and onmouseout events

  • The onMouseOver and onmouseout events can be used to trigger a function when the user moves the mouseover or out of an HTML element:

Onmousedown, onMouseUp, and onClick events

  • The onMouseDown, onMouseup, and onClick events make up the complete mouse click event.
  • The onMouseDown event is triggered when the mouse button is clicked. The onMouseup event is then emitted when the mouse button is released; Finally, when the mouse click is complete, the onclick event is triggered.