42. Events and event binding

1. What is an event?

• Events are the default behavior that the browser assigns to an element, which means that events are inherent, regardless of whether or not we bind methods to them, when some behavior is triggered, the associated event is triggered to execute!

• The event behavior that the browser assigns to an element

  • Keyboard events

    • Click event (PC: click N times frequently, triggering N click events) Click event (mobile terminal: no second click operation occurs within 300ms, it is regarded as a click event behavior, so click has 300ms delay on mobile terminal)

    • Dblclick Double-click event

    • Cibtextmenu mouse right click trigger

    • Mousedown Press and hold down the mouse

    • Mouseup The mouse is lifted

    • Mousemove Mouse movement

    • Mouseover Mouse slide in

    • Mouseout mouseout

    • Mouseenter Enter the mouse

    • Mouseleave Mouse away

    • Mousewheel To scroll

  • Keyboard events

    • Keydown Down the keyboard

    • Keyup Indicates that the keyboard is lifted

    • Keypress long press (except shift/Fn/CapsLock)

  • Finger events

    • Touch Event Single-finger Event model

      • TouchStart Finger press down

      • Touchmove Finger movement

      • Touchend finger release

    • Gesture Event Multi-finger Event model

  • Form events

    • Focus get focus

    • Lose focus

    • Submit the form (if the form elements are included in the form and the button is Submit)

    • Reset form resets (if form elements are included in the form and the button is reset)

    • Select Select from the select drop-down list box

    • Change the content

    • Input is often used on mobile, where the content in a monitoring text box is triggered as input changes

  • Resources events

    • Load successfully loaded (window.onload/img.onload)

    • Error loading failure

    • Beforeunload resources before unloading (window.onbeforeunload page is triggered before closing)

  • CSS3 animation event

    • Transitionstart Transition The animation starts

    • Transitionend Transition Animation ends

    • Transitionrun Transition Animation is running

  • View the event

    • Resize Changes the size of the element (browser)

    • Scrool scroll bar

2. What is event binding

• Bind a method to the element’s default event behavior so that it can be executed when the behavior fires!

  • Dom0-level event binding

    • Syntax: [element].on[event] = [function]

    document.body.onclick = function() {}
    Copy the code

    • Remove binding: assign to null or some other non-functional value

    document.body.onclick = null
    Copy the code

    • Each DOM element has a number of private attributes similar to onXXXX. We assign these private attributes to represent the event, which is the DOM0 event binding

      • Event binding cannot be implemented in this way without a private property value for the corresponding event

      • You can bind only one method to an event behavior of the current element, bind multiple methods, and the last operation overrides the previous one

      • The benefits are fast execution and easy for developers to use

      document.body.onclick = function() {
          console.log(1)}document.body.onclick = function() {
          console.log(2)}Copy the code

  • Dom2-level event binding

    • Syntax: [element].adDeventListener ([event], [method], [capture/bubble])

    document.body.addEventListener('click', fn1, false)
    Copy the code

    • Remove: [element].removeEventListener([event], [method], [capture/bubble]) but requires the same parameters as when binding

    document.body.removeEventListener('click', fn1, false)
    Copy the code

    • Principle/Features

      • Every DOM elements based on __proto__, lookup to EventTarget. The prototype of addEventListener/removeEventListener method, based on these methods implement event binding and removed: DOM2 event binding adopts the event pool mechanism.

      • DOM2 event binding, binding methods are generally not anonymous functions, as long as the purpose is to facilitate the removal of the event binding when used

      • Any browser-provided event behavior can be bound and removed based on this pattern (for example: Window. OnDomContentLoaded is no good, because there is no this private event attributes, but to the window. The addEventListener (‘ DOMContentLoaded ‘func) it is possible)

      • You can bind multiple “different” methods (into the event pool) to an event type of the current element, so that the event behavior is triggered and the corresponding methods are fetched from the event pool (in the order of the binding) and executed