The event type

Many things can happen to a Web browser. DOM3 specifies the following types of events

UI events

Triggered when the user interacts with an element on the page

  1. The load event on the window is triggered when the page is fully loaded (all images, JS files, CSS files, etc.)
<img src="logo.icon" onload="alert('logo loaded! ')">
Copy the code
/ / js
let img = document.querySeletor("#myImg");
img.addEventListener("load".function(event){
    alert('logo loaded! ');    
},false)
Copy the code

  1. An UNLOAD event corresponds to load and is triggered when a document has been completely unloaded. An Unload event occurs when a user switches from one page to another. Generally used for cleaning applications to avoid memory leaks

  2. The resize event is triggered when the browser window is resized to a new height or width. Event handlers can be specified on the window using the onresize feature of the body, usually using JS

  3. In promiscuous mode, this change can be monitored by scrollLeft and scrollTop of the body element. Standard schemas other than Safair reflect changes based on HTML elements

“Event”

Triggered when an element gains or loses focus

  • Blur: Triggered when an element tries to move out of focus. This event does not bubble and is supported by all browsers
  • DOMFocusIn: triggered when the element gains focus (only Opera), equivalent to focus, focusin has been deprecated by DOM3
  • DOMFocusOut: triggered when an element loses focus (only Opera), the generic version of blur; DOM3 is obsolete and FocusOut was selected
  • Focus: Triggered when an element is in focus, does not bubble, supported by all browsers
  • Focusin: Fires and bubbles when the element gains focus
  • Focusout: Fires and bubbles when an element loses focus

Using these events, combined with document.hasfoucus () and document.ActiveElement properties, you can know the user’s whereabouts on the page and the sequence of events that trigger when the focus moves from one element to another

  1. Focusout fires on elements that have lost focus
  2. Focusin fires on the element that gets focus
  3. Blur triggers on elements that are out of focus
  4. DOMFocusOut fires on elements that have lost focus
  5. Focus fires on the element that gets the focus
  6. DOMFOcusIn fires on the element that gets focus

Mouse events

Triggered when the user performs an action on the page with the mouse

  1. Click Event The user clicks the main mouse key (usually the left key) or presses the Enter key
  2. Dbclick event The user double-clicks the main mouse key
  3. Mousedown is triggered when the user presses any mouse key
  4. Mouseenter is triggered when the mouse cursor first moves within an element from outside it, does not bubble, and does not fire when the cursor moves over a descendant element
  5. Mouseleave fires when the mouse cursor over an element moves out of range of the element, does not bubble, and does not fire when the cursor moves over a descendant element
  6. Mousemove fires repeatedly as the mouse pointer moves inside the element
  7. Mouseout moves the mouse from one element to another, and the main target of the event is the element that has lost the cursor
  8. The mouseover event is triggered when the mouse moves from outside one element to within the boundary of another element for the first time. The main target of the event is the element that gets the cursor
  9. Mouseup is triggered when the user releases the mouse button

Click the event trigger sequence

  • mousedown
  • mouseup
  • click
  • mousedown
  • mouseup
  • dbclick

Partial properties that exist in mouse events

  • ClientX Horizontal coordinates of the mouse pointer in the viewport
  • ClientY mouse pointer in vertical position of viewport
  • PageX horizontal position of the page
  • Page vertical position clientX == pageX with no scrolling cleared
  • The horizontal coordinates of screenX relative to the screen
  • The vertical coordinates of screenY relative to the screen
  • ShiftKey (Shift key),ctrlKey (CTRL key),altKey (Alt key),metaKey(Win key in Windows, Cmd key in MAC), true means these keys are pressed
  • Button 0 represents the primary key (left), 1 represents the wheel, and 2 represents the secondary key (right). This should be compatible with IE
  • Detail for the click event, the number of clicks, provided the mouse does not move

Wheel events

Triggered when the user uses a mouse wheel (or similar device)

  1. The mousewheel event is triggered when the user interacts with the page with the mousewheel and scrolls the page vertically, eventually bubbling to either document(IE8) or window(IE9,Opera,Chrome,Safari).
  • The mouseDelta property scrolls forward in multiples of 120; When I scroll backwards, the multiple of -120 was the opposite before Opera9.5, which is probably not that old anymore. Opera is now 60 and Firefox supports a DOMMouseScroll event, where the information is stored in the detail property as a multiple of 3 and a multiple of -3

Precautions for touching devices

IOS and Android

  • Dbclick is not supported. Double clicking will enlarge the browser
  • Tapping clickable elements (binding onclick, or links, etc.) triggers mouseover events; If the screen does not change, trigger mousedown,mouseup,click; Tapping unclickable elements does not trigger any events
  • The Mousemove event also triggers mouseover,mouseout
  • The MouseWheel and Scroll events are triggered when two fingers are placed on the screen and moved with their fingers
  • For special people, try to use click to handle click events