Classification of events in JavaScript

We also all know that there are many kinds of events in JavaScript, and they are also very commonly used. The important thing is that they are not easy to remember. Just read it when writing JavaScript events Once, it was not easy to find when I was looking for it, which was a headache, so let’s classify the events in JavaScript

Mouse click event
mousedown, mousemove, mouseout, dblclick (double-click), contextmenu (right-click menu)

Mouse wheel eventmousewheel
Roller event, suitable for IE /Google safari, DOMMouseScroll–>Firefox’s private scroll wheel event can only be bound using addEventListener().
e.wheelDelta > 0 means the wheel is up. e.wheelDelta < 0 means the wheel is down. e.detail<0 means the scroll wheel is up, e.detail>0 means the scroll wheel is down, privately owned by Firefox.

Keyboard events
keypress, keydown, keyup
keydown can detect all keyboard keys, including physical keys and auxiliary keys [ctrl, shift, alt, f1...]
keypress can only detect physical keys [characters, letters, numbers, symbols, spaces], and can detect the uppercase and lowercase letters, and detect the key you press e.keyCode

Touch screen event
touchstart, trigger when finger presses the screen
touchmove, trigger when finger slides on the screen
touchend, trigger when finger leaves the screen
touchcancel, touch Screen event cancellation

Animation event
Zoom pinchstart zoom gesture starting point
pinchend zoom gesture end point
pinch zoom gesture
pinchin shrink
pinchout zoom
rotate rotateleft rotate left
rotateright rotate right
rotate rotate
swipe swipestart starting point of sliding gesture
swiping sliding
swipeend end point of sliding gesture
swipeleft slide left
swiperight slide right
swipeup slide up
swipedown slide down
swipe slide
drag start dragstart drag the screen
drag drag drag gesture
Drag end dragend drag the screen
Drag drag drag gesture
Long press hold Long press the screen
Tap tap click the screen

Form event
onchange[FormDrop-down listWhen the element changes],
oninput[When the text box is entered]
onsubmit[When the form is submitted]
onfocus[Get focus]
onblur[Lost focus]

Two ways of event binding.
on and addEventListener()
1. On event binding
Events bound through on can be passed and can be set to NULL. Remove.
On events can only be added to the bubbling phase of the event.
2. addEventListener()
Events bound by addEventListener(type, handle, boolean) can be removed by removeEventListener(type, handle, boolean) . boolean is false bound to the bubbling phase of the event. Binds to true to the capture phase of the event.

Event bubbling and capturing
Prevent bubbling:
For events bound by on, use e .cancelBubble = true;
addEventListener Use e.stopPropagation() to prevent event propagation

Block the default event
1, return false;
2, event.preventDefault;

This may not be the most detailed, but these are the most commonly used ones.

The above is the detailed content of Classification of events in JavaScript. For more information, please follow other related articles on the PHP Chinese website!