This is the 16th day of my participation in the August More Text Challenge

DOM events

1.1 Event Definition

Events: specific moments of interaction between documents (HTML elements and documents) or browser Windows; You can listen for these events to perform specific actions when the event occurs;

let btn = document.querySelector('.btn');
let box = document.querySelector('.box');
Copy the code

1.2 Common Events:

1.2.1 Mouse Events

An event triggered when the mouse moves

  • Onclick = function() {} Click event
  • Ondbclick = function () {} Double click event
  • Element onmouseEnter = function () {} mouse over
  • Onmouseleave = function () {} mouse out
  • Onmouseover = function () {
  • Onmouseout = function () {
  • Onmousemove = function () {} Mouse move
  • Onmousedown = function () {} Mouse down
  • Onmmouseup = function () {} Mouse lift
  • Onmousewheel = function () {} Mouse wheel scroll
box.onmouseover = function () {
   console.log(1111)}; box.onmouseout =function () {
   console.log(2222)}; box.onmousedown =function () {
   console.log('3333')}; box.onmouseup =function () {
   console.log(4444)}; box.onmousewheel =function () {
   console.log(555);
};

Copy the code

1.2.2 Keyboard Events:

Input, textarea, document.body, document.window, document.documentElement listen for keyboard events:

  • Element. Onkeydown = function() {} Keyboard down
  • Element. Onkeyup = function () {} Keyboard lift
let input = document.querySelector('#input');
input.onkeydown = function () {
   console.log('123')};document.onkeyup = function () {
   console.log('keyup')};window.onkeydown = function () {
   console.log('window key down')};Copy the code

1.3 Form element events

  • Onfocus Gets the focus (cursor) event
  • Onblur Is triggered when focus is lost
  • The onchange event that is triggered when the value of the form changes
  • Oninput Event Input events of elements such as input and textarea
input.onfocus = function () {
   console.log('Get focus')}; input.onblur =function () {
   console.log('Out of focus')}; input.oninput =function () {
   console.log(this.value);
};
Copy the code
  • 1.4 System Events:
    • Trigger when all resources in the window.onload page are loaded
    • Window. onresize Triggered when the current window size changes
    • Window. onsRoll Triggered when the scroll bar is rolled
window.onresize = function () {
   console.log('Changed, changed');
};

Copy the code
  • 1.5 Mobile event ‘

Ontouchstart is triggered when you touch the element onTouchEnd is triggered when you leave the element onTouchMove is triggered when you slide

  • There is a latency of about 300ms using Click on mobile
box.ontouchstart = function () {
   console.log('start');
};
box.ontouchend = function () {
   console.log('end')};Copy the code

1.2 Event Objects

The arguments passed by the browser to the event function when the event is raised; It contains the specific information triggered by the event.

let box = document.querySelector('.box');

box.onclick = function (e) {
   console.log(e); A MouseEvent E is commonly called an event object, E. clientx The left offset of the mouse click position relative to the current browser's viewing window. E. Pagex The left offset of the mouse click position relative to the left edge of the body The offset value of the mouse click position relative to the upper edge of the bodywindow.event on the property};document.onkeydown = function (e) {KeyboardEvent KeyboardEventconsole.log(e);
   console.log(e.keyCode); Keycode: each key on the keyboard corresponds to a keycode. When the keyDown event is triggered,};Copy the code

1.3 Default Events and Behaviors

Some elements are subject to default behavior, such as the A tag that jumps when clicked.

let baidu = document.getElementById('baidu'); Block default behavior: bidum.onclick =function (e) {
   alert(111); e.preventDefault(); Block elements from default event behavior IE lower version: e.returnValue =false
    return false;  return falseYou can also block the default behavior};Copy the code

1.4 Event Dissemination:

let$=(selector) = > document.querySelector(selector);

let outer = $('.outer');
let inner = $('.inner');
let center = $('.center');
document.onclick = function () {
   console.log('document')}; outer.onclick =function () {
   console.log('outer')}; inner.onclick =function () {
   console.log('inner')}; center.onclick =function (e) {
   console.log('center');
   e.stopPropagation();
};
Copy the code
  • Clicking center triggers the center click, as well as the inner and outer and higher-level elements. This phenomenon is called the bubbling mechanism of events;

Event trigger process: Event trigger is divided into two three stages: capture stage, target stage, bubble stage. When the event is triggered, the browser starts to search from the outermost element first, and the process of finding the event source is called the capture stage. After the event source is triggered, the event starts to bubble up, and the event of the parent element is triggered successively.

  • Element onXXX = func… All bound events are DOM0-level events, and dom0-level events are in the bind re-bubble phase.

  • To cancel bubbles: e.topPropagation ()

    • IE lower version: e.cancelbubble = true;
    • Events are no longer propagated upwards after bubbling is cancelled. Events corresponding to higher-level elements do not fire;

1.5 onmouseover and mouseenter

let$=selector= > document.querySelector(selector);
let inner = $('.inner');
let outer = $('.outer');
Copy the code
  • mouseover
inner.onmouseover = function () {
   console.log('inner over');
};

inner.onmouseout = function () {
   console.log('inner out')}; outer.onmouseover =function () {
   console.log('outer over')}; outer.onmouseout =function () {
   console.log('outer out')};Copy the code
  • mouseenter
inner.onmousenter = function () {
   console.log('inner enter');
};

inner.onmouseleave = function () {
   console.log('inner leave')}; outer.onmouseenter =function () {
   console.log('outer enter')}; outer.onmouseleave =function () {
   console.log('outer leave')};Copy the code
  • Mouseenter vs. Mouseover:

  1. Over is a row event that goes from the parent element to the child element, and it leaves the parent element, triggering the parent element’s out event, and then triggering the child element’s over event;

  2. Enter is an entry from the parent element into the child element, does not count leaving the parent element, does not trigger the parent element’s leave event;

  3. Enter and leave prevent events from bubbling, while over and out also have bubbling propagation.

__so in the case of parent-child nesting, using over triggers a lot of uncontrollable situations, and using Enter is easier. __

Onload and DOMContentLoaded

    1. Onload event: executed after the load succeeds

  • Window. onlaod is triggered when all resources (CSS, JS, images, etc.) on the page are loaded:

window.onload = function () {
   console.log('Load complete')};Copy the code
    1. DOMContentLoaded: This can be triggered as soon as the DOM structure in the page is loaded
document.addEventListener('DOMContentLoaded'.function () {
   console.log('THE DOM structure is loaded.')});Copy the code
  • JS is used to manipulate the DOM, and is usually executed after the DOM has finished loading.
document.addEventListener('DOMContentLoaded'.function () {
   // The DOM structure is loaded before it is executed
});
Copy the code

3. Event delegation

  • There are 10 Li’s in the page. If you click on any li, the text content of the Li pops up

let liList = document.querySelectorAll(‘#list > li’);

for (let i = 0; i < liList.length; i++) {
   liList[i].onclick = function () {
      alert(this.innerText); }}Copy the code
  • Using event delegates: bind events to parent or higher elements and then do different things depending on the e.target event source;
let list = document.querySelector('#list');
list.onclick = function (e) {
   let { target } = e;

   // The event source tagName is used to distinguish which element is clicked
   if (target.tagName.toLowerCase() === 'li') { alert(target.innerText); }};Copy the code
  • Circular binding events are inefficient and not suitable for dynamically bound data.
  • Event delegate: it uses the bubbling propagation mechanism of events to bind the same event behavior to each child element and bind the event to their common superior element. Then, it uses E.target to distinguish the specific element that triggers the event and do different operations.