Vue.js

1. Focus event: An event triggered when an element gains or loses focus.

Focus events are events that are triggered when an HTML element gains or loses focus. These events are fired when the user interacts with elements on the page, such as clicking on an input box or using the Tab key to switch focus.

Common focus events include:

1. focus event: triggered when an element gains focus. For example, when the user clicks on an input box, the input box triggers the focus event.

2. blur event: triggered when an element loses focus. For example, when the user leaves the input box, the input box triggers the blur event.

When an element gets focus, you can perform some operations, such as:

Form validation: When the user clicks on the input box to enter content, the focus event can be used to verify whether the input format meets the requirements. For example, you can check that the password input box contains enough characters, or verify that the email in the email input box is formatted correctly

const passwordInput = document.getElementById(‘password’); passwordInput.addEventListener(‘focus’, () => {

//Execute password format verification logic

});

Autocomplete: When the user clicks on the input box, the focus event can be used to display an autocomplete drop-down list to help the user select or complete the input content. For example, when a user enters a keyword in the search box, the display of search suggestions can be triggered through the focus event.

const searchInput = document.getElementById(‘search’); searchInput.addEventListener(‘focus’, () => {

// Display search suggestion dropdown list

});

When the element loses focus, you can also perform some operations, such as:

Real-time saving: When the user leaves the input box, you can use the blur event to save the input content. For example, in a rich text editor, when the user ends editing and leaves the editing area, the editing content can be saved through the blur event.

const editor = document.getElementById(‘editor’); editor.addEventListener(‘blur’, () => {

//Save edits

});

Hide additional elements: When the user leaves a specific area, you can use the blur event to hide some additional elements to improve the interactive experience of the user interface. For example, the blur event can be used to hide a popup menu when the user navigates away from it.

const dropdownMenu = document.getElementById(‘dropdown’); dropdownMenu.addEventListener(‘blur’, () => {

//Hide popup menu

});

2. Mouse events: events triggered when the mouse is used to perform certain operations on the page

Mouse events are events that are triggered when the mouse is used to perform certain actions on the page. Here are two common mouse events and examples of their cases:

click event: triggered when the user clicks the mouse button. For example, the following functions can be implemented through the click event:

• Button click: When the user clicks a button, perform related actions.

const button = document.getElementById(“myButton”); button.addEventListener(“click”, () => {

//Perform operations after button click

});

• Hyperlink click: When a user clicks on a hyperlink, some specific action is performed, such as page jump or scrolling to a specific part of the page.

• mouseover event: triggered when the mouse hovers over an element. For example, the following functions can be achieved through the mouseover event:

• Menu drop-down: Shows a drop-down menu when the mouse is hovering over the navigation menu.

const link = document.getElementById("myLink");

link.addEventListener("click", event => {
  event.preventDefault(); // Prevent the default page jump behavior

  //Perform operations after clicking the link, such as page scrolling, asynchronous loading of content, etc.
});

1. mouseover event: triggered when the mouse hovers over an element. For example, the following functions can be implemented through the mouseover event:

• Menu drop-down: Shows a drop-down menu when the mouse is hovering over the navigation menu.

• const menu = document.getElementById("myMenu");
  
  menu.addEventListener("mouseover", () => {
    //Show drop-down menu
  });

• Prompt information display: When the mouse hovers over an element with prompt information, the corresponding prompt information is displayed.

const tooltip = document.getElementById("myTooltip");

tooltip.addEventListener("mouseover", () => {
  //Display prompt information
});

Common mouse events also include mousemove, mousedown, mouseup, mouseout, etc., which can be determined according to different Behavioral requirements to choose the appropriate mouse events to use.

3. Wheel event: Event triggered when using the mouse wheel.

wheel event: triggered when the mouse wheel scrolls

• Page scrolling: When the user uses the mouse wheel, the wheel event can be listened to to achieve smooth scrolling of the page.

window.addEventListener('wheel', event => {
  event.preventDefault(); // Prevent default page scrolling behavior

  const delta = Math.sign(event.deltaY); // Get the scrolling direction, a positive number means scrolling down, a negative number means scrolling up

  //Perform page scrolling operation, scroll the page up or down according to the scrolling direction
});

• Image scaling: When the user uses the mouse wheel, the user can listen to the wheel event to achieve the image scaling effect.

const image = document.getElementById('myImage');

image.addEventListener('wheel', event => {
  event.preventDefault(); // Prevent default page scrolling behavior

  const delta = Math.sign(event.deltaY); // Get the scrolling direction, positive number means zoom in, negative number means zoom out

  //Perform image zoom operation, enlarging or reducing the image according to the scrolling direction
});

mousewheel event: Similar to the wheel event, but with compatibility across browsers.

• Page zoom: When the user uses the mouse wheel, the user can listen to the mousewheel event to achieve the page zoom effect.

window.addEventListener('mousewheel', event => {
  event.preventDefault(); // Prevent default page scrolling behavior

  const delta = Math.sign(event.deltaY); // Get the scrolling direction, positive number means zoom in, negative number means zoom out

  //Perform the page zoom operation to enlarge or reduce the page according to the scrolling direction
});

• Scroll menu: When the user uses the mouse wheel, you can listen to the mousewheel event to achieve the scrolling effect of menu items.

const menu = document.getElementById('myMenu');

menu.addEventListener('mousewheel', event => {
  event.preventDefault(); // Prevent default page scrolling behavior

  const delta = Math.sign(event.deltaY); // Get the scrolling direction, a positive number means scrolling down, a negative number means scrolling up

  //Perform a scrolling menu operation, scrolling menu items up or down according to the scrolling direction
});

Developers can use other wheel events to achieve more interactive effects based on specific needs. In different browsers, the support and property names for scroll wheel events may be different, so it is recommended to perform consistent compatibility processing when using them.

4. Input events: events triggered when text is entered into the document

input event: triggered when the text content changes.

• Real-time search: When users enter keywords in the search box, matching search results are displayed in real time.

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.trim();

  //Perform the search operation, call the API to obtain matching search results and display them on the page
});

• Form verification: When the user enters the form content, verify in real time whether the input content meets the requirements.

const formInput = document.getElementById('formInput');

formInput.addEventListener('input', () => {
  const inputValue = formInput.value.trim();

  //Perform form validation operations to check whether the input content conforms to the rules
});

change event: triggered when the element’s value changes and loses focus.

• Drop-down box selection: When the user selects an option in the drop-down box and confirms the selection, the change event is triggered.

const select = document.getElementById('mySelect');

select.addEventListener('change', () => {
  // Execute the drop-down box selection operation and perform corresponding operations on the page according to the options selected by the user.
});

• File upload: When the user chooses to upload a file and confirms the upload, the change event is triggered.

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];

  //Perform a file upload operation and upload the file selected by the user to the server
});

Common input events also include keydown, keyup, focus, blur, etc., which can be determined according to different Behavioral requirements to choose the appropriate input events to use.

5. Keyboard events: Events triggered when using the keyboard to perform certain operations on the page

keydown event: triggered when a key on the keyboard is pressed.

Case 1: Press the Enter key to submit the form

Case 2: Change the style of page elements when a key is pressed

keyup event: triggered when a key on the keyboard is released

Case 1: Play music when a key is pressed

<audio id="myAudio" src="music.mp3"></audio>
<script>
document.addEventListener("keyup", function(event) {
if (event.keyCode === 65) { // The keyCode of key A is 65 document.getElementById("myAudio").play(); // Play music
}
 });
</script>

Case 2: Display prompt message when pressing a certain key

6. Input method events: events triggered when using certain input methods

Input method events are events triggered when text is entered in the input method. Common events include compositionstart, compositionupdate and compositionend.

compositionstart event: triggered when the input method starts input

Case 1: Display the “Inputting” prompt message

<input type="text" id="myInput" oncompositionstart="showInputing()">
<div id="myDiv"></div>
<script>
function showInputing() {
document.getElementById("myDiv").innerText = "Inputting...";
}
</script>

Case 2: Output the time when the input method starts inputting on the console

compositionend event: triggered when the input method ends input

Case 1: Hide the “Inputting” prompt message

<input type="text" id="myInput" oncompositiοnend="hideInputing()">
 <div id="myDiv"></div>
<script>
function hideInputing() {
document.getElementById("myDiv").innerText = "";
}
</script>

Case 2: Output the time when the input method ends input on the console

Compositionupdate event: triggered when the input method updates input

Case 1: Real-time display of entered text

Case 2: Update the input text in the console output input method

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treevue3 basics (JS)Vue3 current situation 39637 people are learning the system