The event

  • What is an event

Events are the default behavior that the browser assigns to an element, and we can also understand that events are inherent in that they are triggered when some behavior is triggered, regardless of whether or not we bind methods to it, but if we do not bind methods to it, nothing will be done when the event is triggered.

  • The event behavior that the browser assigns to an element

Event reference

  • Mouse events
    • Click event (PC: N clicks trigger N events) Click event (mobile terminal: no second click within 300ms, as a click event, so there is a 300ms delay for click on mobile terminal)
    • Dblclick Double-click event
    • Contextmenu Right mouse click event
    • 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
    • Wheel The mouse wheel rolls
  • Keyboard events
    • Keydown Down the keyboard
    • Keyup Indicates that the keyboard is lifted
    • Keypress long press (except Shift/Fn/CapsLock)
  • Finger events

[Touch Event Event model]

  • Touchstart Finger press down
  • Touchmove Finger movement
  • Touchend finger release

[Gesture Event]

  • Form events
    • Focus on
    • Lose focus
    • Submit the form (if the form elements are included in the form and the button is clicked submit)
    • Resetting the reset form
    • The content of the select drop-down box is selected
    • Change the content
    • Input text box content change event
  • 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
    • Transitionrun Transition Animation is running
    • Transitionend CSS overcompletes
  • View the event
    • Resize element or browser size change
    • Scroll event

event

  • What is event binding

Bind a method to the element’s default event behavior so that it can be executed when the behavior is triggered

  • Dom0-level event binding
    • [element].on[event] = [function] document.body.onclick = function(){}
    • Remove binding: Assign null or some other non-function value document.body.onclick = null
    • How it works: Each DOM element object has a number of private properties similar to onxxx private properties. We assign these properties to represent the event private properties, which is DOM0 level event binding
      • Event binding cannot be implemented in this way without a private property value for the corresponding event (e.g., DOMContentLoaded)
      • You can bind only one method to the event behavior of the current element, and bind multiple methods, the last of which overrides the previous method
      • The advantage is: high efficiency of execution, and easy to develop and use
  • Dom2-level event binding
    • Elements of grammar: [] addEventListener ([event], [method], [capture/bubbling]) document. The body. The addEventListener (‘ click ‘fn1, false);
    • Remove events: [r]. Element removeEventListener ([event], [method], [capture/bubbling]) document. The body. The removeEventListener (‘ click ‘fn1, false);
    • Principle: every DOM elements is based on the prototype chain lookup mechanism, find the EventTarget. The prototype of addEventListener/removeEventListener method, based on these methods achieve event bindings and remove; DOM2 event binding uses the event pool mechanism
      • DOM2 event binding, binding methods are generally not anonymous functions, the main purpose is to facilitate the removal of events when used
      • Any browser-provided event behavior can be bound and removed based on this mode (e.g. Window. The onDomContentLoaded is no good, because there is no private event attributes, but we can use window. The addEventListener (‘ DomContentLoaded ‘func)) to bind
      • You can bind multiple different methods (into the event pool) for each event type of the current element, so that when the event action is triggered, the corresponding methods are pulled out of the event pool (in binding order) to execute.

The event object

  • What is an event object

Bind a method to an event action on the current element. When the event action is triggered, not only does the bound method execute, but it also passes an argument to the method by default. This argument is the event object. Event object: Stores the current event operation and related information triggered (event object browser itself records the current operation information, regardless of which function)

  • MouseEvent object: MouseEvent
    • ClientX /clientY The X/Y coordinates of the mouse trigger point from the current window
    • PageX /pageY The X/Y coordinates of the mouse trigger point from the Body
    • Type Event type
    • Target /srcElement Gets the current event source (the element of the current operation)
    • Path Propagation path
    • PreventDefault ()/returnValue = false; Blocking default behavior
    • StopPropagation ()/cancelBubble = false; Prevent bubbling from spreading
  • KeyboardEvent object: KeyboardEvent
    • Which /keycode gets the keyboard code for the key
      • Direction key: left 37 up 38 right 39 down 40
      • Space 32
      • BackSpace 8
      • Del 46
      • Enter 13
      • Shift 16
      • Ctrl 17
      • Alt 18
    • AltKey whether Alt key is pressed (combination key)
    • CtrlKey Whether to press CTRL key (combination key)
    • ShiftKey Whether to press the Shift key
  • Finger event object: TouchEvent
    • ChangedTouches/targetTouches/changedTouches are all created to record the message of fingers
      • ChangedTouches are created when a finger is touched, moved or moved away from the screen. After leaving the screen, the last time a finger was touched on the screen is stored. Toucheszh, on the other hand, has no message after the finger leaves the screen; The result is a collection of TouchLists that record information for each finger
      • Ev.changedtouches [0] Records the first finger
    • ClientX/clientY with mouse events
    • PageX/pageY with mouse events

Prevents the default behavior of events

Browsers give elements default behaviors (e.g., right mouse button, keyboard input, etc.), and we can disable them with ev.preventdefault ()

window.onContextMenu = function(ev){
	ev.preventDefault();// Block the default mouse right-click menu
	// Here you can implement custom right-click menu
}
Copy the code

Transmission of events

There are three stages in the transmission of events

  • Capture phase CAPTURING_PHASE
    • Search from the outermost element until the source of the event is found, in order to provide a path for the propagation of the bubbling stage; Ev. path stores the propagation paths collected during the capture phase
  • Target phase (current event source) AT_TARGET
    • Triggers the related event behavior of the current event source
  • BUBBLE_PHASE
    • According to the propagation path collected during the capture phase, not only the event behavior related to the current event source fires, but also the event behavior related to all its ancestors from inside out (methods will also be executed if the event is bound to methods)
  • Methods for binding element event behavior in DOM0 level event binding are triggered in the target/bubble phase
  • Dom2-level event bindings can control the way the bound methods fire during the capture phase (but it doesn’t make any sense and is not usually used this way)
    • Element. AddEventListener (event, method, false/true);
    • The last parameter defaults to false: the control method is triggered during the bubble phase, or true during the capture phase
  • Prevent bubbling from spreading
    • Ev.stoppropagation () or ev.cancelbubble = false;

Event delegation

Events to entrust/agent: using event bubbling transmission mechanism (core/premise), we can make A “container” all background elements in A certain “event behavior of E” trigger to do operation, delegated to the events of A behavior, E so late, as long as the trigger any element in A E behavior will spread to A, binds to A method of execution; During method execution, different processing is done depending on the event source

  • The performance is improved by about 60%
  • You can manipulate dynamically bound elements
  • Certain requirements must be fulfilled based on it

Because of the bubbling propagation mechanism, whichever element is clicked on will eventually propagate to the BODY, triggering the BODY’s CLICK event to execute the method bound to it. In the event object received by the method execution, there is a target/srcElement attribute (event source). We can know which element is being operated on, and we can do different things in this method according to the event source, which is the event delegate mechanism.

document.body.onclick = function(ev){
	let target = ev.target,
		targetClass = target.className;
	if(targetClass === 'inner') {console.log('Clicked on the inner element');
		return;
	}else if(targetClass === 'outer') {console.log('Clicked on the outer element');
		return;
	}else if(targetClass === 'box') {console.log('Click on the box element');
		return; }}Copy the code

The difference between mouseover and MouseEnter