This is the 28th day of my participation in the August Text Challenge.More challenges in August

preface

Last time I introduced js keyboard events, today let’s learn JS mouse events, and their respective differences.

introduce

Js has more mouse event types than keyboard events (keyDown, KeyPress, keyUp)

There are two main types, mouse click events and mouse slide events.

As follows:

Mouse click event describe
click Left mouse click event
dblclick Double-click the left mouse button
contextmenu The right mouse click event is usually used to prevent the default behavior of the browser, because the browser brings up the right mouse button menu by default
mousedown Event triggered when the left mouse button is pressed
mouseup The event triggered when the left mouse button is pressed and then released
Mouse over event describe
mouseover The event that fires when the mouse has just slid over the bound element
mouseenter The event that is triggered when the mouse just slides into the binding elementmouseoverafter
mouseout The event that is triggered when the mouse slides out of the bound element
mouseleave The event triggered when the mouse slides out of the binding elementmouseoutafter
mousemove The mouse moves the triggered event around the binding element after it slides in

The difference between

Mouse click event

  1. Execution order

      <div class="content">Hello, I am the answer CP3!</div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('click'.() = > {
      console.log('I am the Click event')
    })
    div.addEventListener('dblclick'.() = > {
      console.log('I'm dblClick event')
    })
    div.addEventListener('mousedown'.(e) = > {
      console.log('I am a Mousedown event')
    })
    div.addEventListener('mouseup'.(e) = > {
      console.log('I am the Mouseup event')})</script>
Copy the code

    You can see that by the order in which it was printed

    mousedown => mouseup => click

    Then dblclick is executed twice (mousedown, mouseup, click).

Mouse over event

  1. Execution order

      <div class="content">Hello, I am the answer CP3!</div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('mouseover'.(e) = > {
      console.log('I'm a Mouseover event')
    })
    div.addEventListener('mouseenter'.(e) = > {
      console.log('I'm a MouseEnter event')
    })
    div.addEventListener('mouseout'.(e) = > {
      console.log('I am a Mouseout event')
    })
    div.addEventListener('mouseleave'.(e) = > {
      console.log('I am mouseleave event')
    })
    div.addEventListener('mousemove'.(e) = > {
      console.log('I'm Mousemove event')})</script>
Copy the code

    You can see that by the order in which it was printed

    When the slide:

    Mouseover => mouseEnter => Mousemove (Internal sliding will be done multiple times)

    When the sliding out:

    mouseout => mouseleave

  2. Mouseover /mouseout also fires when the binding element has descendant elements, and mouseEnter /mouseleave only fires when the binding element slides in/out.

      <div class="content"> < p style = "max-width: 100%; clear: both; <div> I am a child element </div> </div><script>
    const div = document.querySelector('.content')
    div.addEventListener('mouseover'.(e) = > {
      console.log('I'm a Mouseover event')
    })
    div.addEventListener('mouseenter'.(e) = > {
      console.log('I'm a MouseEnter event')
    })
    div.addEventListener('mouseleave'.(e) = > {
      console.log('I am mouseleave event')
    })
    div.addEventListener('mouseout'.(e) = > {
      console.log('I am a Mouseout event')
    })
    div.addEventListener('mousemove'.(e) = > {
      console.log('I'm Mousemove event')})</script>
Copy the code

    I’m going down from the top

    You slide in the binding element, then you slide in the child element, then you slide out the child element, and then you slide out the binding element.

    In the process:

    • mouseoverFires twice, when the binding element is slid in and the child element is slid in.
    • mouseoutTrigger twice, when sliding in a child element (equivalent to sliding out of a binding element) and when sliding out of a child element.
    • mouseenterFires only once, only on the first slide into the binding element
    • mouseleaveOnly fires once, only when the binding element is finally slid out
    • mousemoveTrigger multiple times, because this event is sensitive and will trigger multiple times with a slight movement

    Conclusion:

    • Mouseover and Mouseout are a pair, and slide-in/slide-out is triggered for both binding elements and descendant elements

    • Mouseenter and Mouseleave are a pair. Slide-in/slide-out binding elements fire, and slide-in/slide-out descendant elements do not fire repeatedly

conclusion

The above is my summary of JS mouse events. There are a lot of different types of events, so you can learn, you can do a little bit of code, you can really impress it.

Thank you for reading.