1. Event basis

1.1 Event Overview

JavaScript gives us the ability to create dynamic pages, and events are behaviors that can be detected by JavaScript. Simple understanding: trigger – response mechanism. Every element in a web page can generate some event that triggers JavaScript, for example, we can generate an event when a user clicks a button and then perform some action.

1.2 Three elements of the event

  1. Event source (who is triggered: button)
  2. Event type (what event and how it is triggered: mouse click, keyboard press, etc.)
  3. Event handlers (do what, via a function assignment method)

1.3 Procedure for executing an event

  1. Obtaining event Sources
  2. Register events (bind events)
  3. Add event handlers (in the form of function assignments)

2. Register events (bind events)

2.1 Overview of Registration Events

  • Adding events to an element is called a registration event or a binding event.
  • There are two ways to register events: traditional and method listening registration

Traditional Registration

  • Use the onclick event starting with on
  • < button onclick = “alert (‘ hi ~ ‘)” >
  • btn.onclick = function() {}
  • Features: Uniqueness of registered events
  • Only one handler can be set for an element and an event. The last one registered will override the previous one

Method listens for the registration mode

  • W3c standard recommendation
  • AddEventListener () is a method
  • Internet Explorer prior to Internet Explorer 9 does not support this method. Instead, use attachEvent()
  • Features: Multiple listeners can be registered for the same element and event
  • Follow the order of registration

2.2 addEventListener Event listening mode

eventTarget.addEventListener(type, listener[, UseCapture) eventTarget. AddEventListener () method specifies the listeners registered to the eventTarget (target), when the object trigger event is specified, the event handler should be executed.

This method takes three arguments:

  • Type: String of event types, such as click and mouseover, without on
  • Listener: An event handler that is called when an event occurs
  • UseCapture: Optional, a Boolean value, false by default

2.3 attachEvent Event Listening Mode

eventTarget.attachEvent(eventNameWithOn, callback)

The eventTarget.attachevent () method registers the specified listener with the eventTarget (the target object), and when that object fires the specified event, the specified callback function is executed.

This method takes two arguments:

  • EventNameWithOn: String of event type, such as onclick, onmouseOver, with ON
  • Callback: event handler that is called when the target triggers an event

Note: IE8 and earlier version support, other browsers do not recognize, do not use

Examples:

<button> Traditional registration event </button><button>Method listens for registration events</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. In the traditional way, only one event can be registered
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. Register event addEventListener
            // The event type inside (1) is the string must be quoted without on
            // (2) Add more listeners to the same element and event
        btns[1].addEventListener('click'.function() {
            alert(22);
        })
        btns[1].addEventListener('click'.function() {
                alert(33);
            })
            AttachEvent Internet Explorer 9 earlier versions support attachEvent. If Internet Explorer 9 is not recognized by other browsers, do not use attachEvent
        btns[2].attachEvent('onclick'.function() {
            alert(11);
        })
    </script>
Copy the code

3. DOM event flow

  • The event flow describes the order in which events are received from the page.
  • When events occur, they are propagated in a specific order between element nodes, which is called the DOM event stream.

For example, we register click events for a div: the DOM event flow is divided into three phases:

  1. Capture phase
  2. Current target stage
  3. Bubbling phase
  • Event bubbling: A process first proposed by IE in which an event is first received by the most specific element and then propagated up the hierarchy to the topmost node of the DOM.
  • Event capture: First proposed by Netscape, the process of starting with the topmost node of the DOM and propagating down the hierarchy to the most specific element received.

For example:

If we throw a stone into the water, it will first have a descent process, which can be understood as the capture process from the topmost layer to the most specific element of the event (the target point); Bubbles are then created and float to the surface of the water after the lowest point (the most specific element), a process equivalent to event bubbling. When events occur, they are propagated in a specific order between element nodes, which is called the DOM event stream.

Note:

  1. Only one of these phases can be captured or bubbled in JS code.
  2. Onclick and attachEvent only get the bubbling phase.
  3. AddEventListener (type, listener[, useCapture]) the third argument, if true, calls the event handler during the event capture phase; If false (the default is false if you do not write), the event handler is invoked during the event bubble phase.
  4. We rarely use event capture in real development, focusing more on event bubbling.
  5. Some events do not bubble, such as onblur, onFocus, onMouseEnter, onmouseleave
  6. Event bubbling can sometimes cause trouble, and sometimes it can help to do something very cleverly
   <div class="father">
        <div class="son">Son box</div>
    </div>
    <script>
        // DOM events flow in three phases
        // Only one of the phases can be captured or bubbled in the 1.js code.
        // 2. Onclick and attachEvent (ie) can only get bubbling stages.
        // 3. Capture phase if the third addEventListener parameter is true
        Document -> HTML -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        // alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        // alert('father');
        // }, true);
        If the third addEventListener parameter is false or omitted
        // Son -> father ->body -> HTML -> document
        var son = document.querySelector('.son');
        son.addEventListener('click'.function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click'.function() {
            alert('father');
        }, false);
        document.addEventListener('click'.function() {
            alert('document');
        })
    </script>
    ` ``
Copy the code