foreword
In front-end development, operations related to events are very common operations, especially the requirements involving complex interactions in actual business scenarios. There are many commonly used events in JS, and they involve different methods and types of click events. Generally, events are used in combination with functions. This is why events and functions are not separated, that is, the execution of functions is driven by events that occur. . Regarding the use of common events, this article will share in detail and record them for later reference.
What are events in JS?
In JS, an event actually refers to an operation performed by a user due to a certain behavior in a certain transaction, that is, some operation behavior on web page elements. An event is a specific interactive operation moment that occurs in a document or browser window. It is an action performed by the user or the browser itself, and is a bridge for interaction between JS and DOM. For example, click, load, and mouseover are all events. name. Events are usually used in conjunction with functions in order to drive function execution through events that occur.
Note : In JS, event names are case sensitive. If it is an event listening method, you need to cancel on in front of the event name.
The three elements of the event
The three elements of an event refer to the source of the event, the event itself, and the event driver.
1. Event source: refers to which element triggers the event, such as: div tag, button tag, etc.
2. The event itself: The event refers to the action performed during the interaction, such as: click, double-click, slide, etc.
3. Event driver: also called event handler, that is, the result after execution, for example: the click event function executed by clicking the button label.
Event summarization in JS
In JS, there are six main types of commonly used events: keyboard events, mouse events, touch events, form events, transition events, and animation events.
1. Keyboard events
Keyboard events are mainly divided into triggers in three states: release, press, and function key not recognized. Specifically as follows:
| keyboard events |
Triggering conditions |
| onkeyup |
Triggered when a keyboard key is released |
| onkeydown |
Triggered when a keyboard key is pressed |
| onkeypress |
Triggered when a keyboard key is pressed and does not recognize function keys, such as ctrl |
Using an example, trigger when the keyboard is released, and output "Hello!", the specific code is as follows:
window.onkeyup = function() {
console.log('Hello!')
}
2. Mouse events
Mouse events are mainly divided into triggers in ten states: left button, right button, double click, passing, leaving, gaining focus, losing focus, moving, popping up, and pressing. Specifically as follows:
| mouse event |
Triggering conditions |
| onclick |
Triggered when the left mouse button is clicked |
| context menu |
Triggered when the mouse is right clicked |
| ondblclick |
Triggered when the mouse is double-clicked |
| onmouseover |
Triggered when the mouse is over |
| onmouseout |
Fired when the mouse leaves |
| onfocus |
Triggered when the mouse focus is obtained |
| onblur |
Triggered when the mouse focus is lost |
| onmousemove |
Triggered when the mouse moves |
| onmouseup |
Triggered when the mouse is up |
| onmousedown |
Triggered when the mouse is pressed |
Example of use, trigger when the mouse clicks the left button, add a click event to the btn button, click to output Hello!, the specific code is as follows:
let button = document.querySelector('button')
button.onclick = function() {
console.log('Hello!')
}
3. Touch events
Touch events are mainly divided into triggers in three states: touch, slide, and move away. Specifically as follows:
| touch event |
illustrate |
| touchstart |
Triggered when a finger touches a DOM element |
| touchmove |
Triggered when a finger slides over a DOM element |
| touchend |
Fired when the finger moves away from a DOM element |
Using an example, it is triggered when a touch event is triggered, and when the finger touches the box, the specific code is as follows:
let title = document.querySelector('div')
title.touchstart = function() {
console.log('touch')
}
4. Form events
Form events are mainly divided into triggers in seven states: gain focus, lose focus, input, change, select, reset, and submit. Specifically as follows:
| form event |
Triggering conditions |
| onfocus |
Fired when the form gets focus |
| onblur |
Triggered when the form loses focus |
| oninput |
Triggered every time the form is entered |
| onchange |
Triggered when the form content changes |
| onselect |
Triggered when form text is selected |
| onreset |
Triggered when the form is reset |
| onsubmit |
Triggered when the form is submitted |
Using an example, it is triggered when the form is entered every time, and the content entered in the form is printed out every time. The specific code is as follows:
let input = document.querySelector('input')
input.oninput = function() {
console.log(this.value); //value就是输入的内容
}
5. Transition events
Transition events are fired when the transition is complete. Specifically as follows:
| transition event |
Triggering conditions |
| ontransitional |
fires when the transition completes |
6. Animation Events
Animation events are mainly divided into triggers in three states: end, repeat, and play. Specifically as follows:
| animation event |
Triggering conditions |
| onanimationend |
Triggered when the animation finishes playing |
| onanimationiteration |
Triggered when the animation repeats |
| onanimationstart |
Triggered when the animation starts playing |
event object
The event objects in JS mainly include: event objects, mouse event objects, and keyboard event objects.
1. Event object
The event object mainly includes four parts: object, type, method, and prevent bubbling. Specifically as follows:
| The property method of the event object |
illustrate |
| e.target |
Refers to the object that returns the trigger event |
| e.type |
Refers to the type of event returned, such as click, mouseover, without on |
| e.preventDefault() |
Refers to the method that prevents the default event, such as prohibiting the left button on the page |
| e.stopPropagation() |
Refers to the method that prevents the event from bubbling |
Using an example, when the button is clicked, the object that triggers the event is printed, and the specific code is as follows:
let button = document.querySelector('button')
button.onclick = function(e) {
console.log(e.target); //触发事件的对象
}
2. Mouse event object
The mouse event object mainly includes six parts: browser x coordinate, browser y coordinate, document x coordinate, document y coordinate, screen x coordinate, screen y coordinate. Specifically as follows:
| mouse event object |
illustrate |
| e.clientX |
Refers to returning the X coordinate of the mouse relative to the visible area of the browser window |
| e.clientX |
Refers to returning the Y coordinate of the mouse relative to the visible area of the browser window |
| e.pageX |
Refers to return the X coordinate of the mouse relative to the document page |
| e.pageY |
Refers to return the Y coordinate of the mouse relative to the document page |
| e.screenX |
Refers to returning the X coordinate of the mouse relative to the computer screen |
| e.screenY |
Refers to returning the Y coordinate of the mouse relative to the computer screen |
3. Keyboard event object
The keyboard event object mainly refers to returning the value of the physical key pressed by the user. Specifically as follows:
| keyboard event object |
illustrate |
| e.key |
Returns the value of the physical key pressed by the user |
Using an example, when the S key is pressed on the page, the value of the pressed physical key is output. The specific code is as follows:
window.addEventListener('keyup', function(e) {
console.log(e.key);
})
at last
Through the detailed introduction of common events in front-end development JS in this article, it is a very key knowledge point in both the actual front-end development work and the front-end job interview, so as a front-end developer, you must master its related content , especially for developers who have been engaged in front-end development for a short time. It is an article worth reading, and the importance will not be repeated. Welcome to pay attention, communicate and make progress together.