Vue.js

 一、焦点事件: 在元素获得或失去焦点时触发的事件。

焦点事件是在 HTML 元素获得或失去焦点时触发的事件。当用户与页面上的元素进行交互时，例如点击输入框或使用 Tab 键切换焦点时，这些事件就会被触发。

常见的焦点事件有：

1. focus 事件：在元素获得焦点时触发。例如，当用户点击输入框时，该输入框就会触发 focus 事件。

2. blur 事件：在元素失去焦点时触发。例如，当用户离开输入框时，该输入框就会触发 blur 事件。

当元素获得焦点时，可以执行一些操作，例如：

表单验证：当用户点击输入框输入内容时，可以使用 focus 事件来验证输入的格式是否符合要求。例如，可以检查密码输入框是否包含足够的字符，或者验证邮箱输入框中的邮箱格式是否正确

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

// 执行密码格式验证逻辑

});

自动完成：当用户点击输入框时，可使用 focus 事件来显示一个自动完成的下拉列表，以帮助用户选择或补全输入内容。例如，当用户在搜索框中输入关键字时，可以通过 focus 事件触发搜索建议的显示。

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

// 显示搜索建议下拉列表

});

  

当元素失去焦点时，同样可以执行一些操作，例如：

实时保存：当用户离开输入框时，可以使用 blur 事件来保存输入的内容。例如，在一个富文本编辑器中，当用户结束编辑并离开编辑区域时，可以通过 blur 事件来保存编辑内容。

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

// 保存编辑内容

});

隐藏附加元素：当用户离开一个特定区域时，可以使用 blur 事件来隐藏一些附加元素，以改善用户界面的交互体验。例如，当用户离开弹出菜单时，可以通过 blur 事件来隐藏该菜单。

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

// 隐藏弹出菜单

});

二、鼠标事件:使用鼠标在页面上执行某些操作时触发的事件

鼠标事件是在使用鼠标在页面上执行某些操作时触发的事件。下面是两个常见的鼠标事件及其案例示例：

click 事件：当用户点击鼠标按钮时触发。例如，可以通过 click 事件实现如下功能：

• 按钮点击：当用户点击一个按钮时，执行相关操作。

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

// 执行按钮点击后的操作

});

• 超链接点击：当用户点击一个超链接时，执行一些特定动作，如页面跳转或滚动到页面的特定部分。

• mouseover 事件：当鼠标悬停在元素上时触发。例如，可以通过 mouseover 事件实现如下功能：

• 菜单下拉：当鼠标悬停在导航菜单上时，显示下拉菜单。

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

link.addEventListener("click", event => {
  event.preventDefault(); // 阻止默认的页面跳转行为

  // 执行点击链接后的操作，如页面滚动、异步加载内容等
});

1. mouseover 事件：当鼠标悬停在元素上时触发。例如，可以通过 mouseover 事件实现如下功能：

• 菜单下拉：当鼠标悬停在导航菜单上时，显示下拉菜单。

• const menu = document.getElementById("myMenu");
  
  menu.addEventListener("mouseover", () => {
    // 显示下拉菜单
  });

• 提示信息显示：当鼠标悬停在带有提示信息的元素上时，显示相应的提示信息

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

tooltip.addEventListener("mouseover", () => {
  // 显示提示信息
});

常见的鼠标事件还包括 mousemove、mousedown、mouseup、mouseout 等，可以根据不同的行为需求来选择使用适当的鼠标事件。 

三、滚轮事件: 使用鼠标滚轮时触发的事件。

wheel 事件：当鼠标滚轮滚动时触发

• 页面滚动：当用户使用鼠标滚轮时，可以监听 wheel 事件来实现页面的平滑滚动效果。

window.addEventListener('wheel', event => {
  event.preventDefault(); // 阻止默认的页面滚动行为

  const delta = Math.sign(event.deltaY); // 获取滚动方向，正数为向下滚动，负数为向上滚动

  // 执行页面滚动操作，根据滚动方向向上或向下滚动页面
});

• 图片缩放：当用户使用鼠标滚轮时，可以监听 wheel 事件来实现对图片的缩放效果。

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

image.addEventListener('wheel', event => {
  event.preventDefault(); // 阻止默认的页面滚动行为

  const delta = Math.sign(event.deltaY); // 获取滚动方向，正数为放大，负数为缩小

  // 执行图片缩放操作，根据滚动方向放大或缩小图片
});

mousewheel 事件：类似于 wheel 事件，但在不同浏览器中具有兼容性。 

• 页面缩放：当用户使用鼠标滚轮时，可以监听 mousewheel 事件来实现对页面的缩放效果。

window.addEventListener('mousewheel', event => {
  event.preventDefault(); // 阻止默认的页面滚动行为

  const delta = Math.sign(event.deltaY); // 获取滚动方向，正数为放大，负数为缩小

  // 执行页面缩放操作，根据滚动方向放大或缩小页面
});

• 滚动菜单：当用户使用鼠标滚轮时，可以监听 mousewheel 事件来实现菜单项的滚动效果。

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

menu.addEventListener('mousewheel', event => {
  event.preventDefault(); // 阻止默认的页面滚动行为

  const delta = Math.sign(event.deltaY); // 获取滚动方向，正数为向下滚动，负数为向上滚动

  // 执行滚动菜单操作，根据滚动方向向上或向下滚动菜单项
});

开发者可以根据具体需求使用其他滚轮事件来实现更多交互效果。在不同的浏览器中，对于滚轮事件的支持和属性名称可能会有所不同，所以建议在使用时进行一致的兼容性处理。 

四、输入事件: 向文档中输入文本时触发的事件

input 事件：当文本内容发生变化时触发。

• 实时搜索：当用户在搜索框中输入关键字时，实时显示匹配的搜索结果。

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

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

  // 执行搜索操作，调用API获取匹配的搜索结果并显示在页面上
});

• 表单验证：当用户输入表单内容时，实时验证输入的内容是否符合要求。

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

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

  // 执行表单验证操作，检查输入的内容是否符合规则
});

change 事件：当元素的值发生变化且失去焦点时触发。 

• 下拉框选择：当用户选择下拉框中的选项并确定选择时，触发 change 事件。

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

select.addEventListener('change', () => {
  // 执行下拉框选择操作，根据用户选择的选项对页面进行相应的操作
});

• 文件上传：当用户选择上传文件并确定上传时，触发 change 事件。

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

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

  // 执行文件上传操作，将用户选择的文件上传到服务器
});

常见的输入事件还包括 keydown、keyup、focus、blur 等，可以根据不同的行为需求来选择使用适当的输入事件。 

五、键盘事件:使用键盘在页面上执行某些操作时触发的事件

keydown事件：当键盘上的某个键被按下时触发。

案例1：按下回车键提交表单

<input type="text" id="myInput" οnkeydοwn="submitForm(event)">

<form id="myForm">

<input type="submit" value="提交">

</form>

<script>

function submitForm(event) {

if (event.keyCode === 13) { // Enter键的keyCode为13

event.preventDefault(); // 阻止默认的提交行为 document.getElementById("myForm").submit(); // 提交表单

   }

}

</script>

案例2：按下某个键时改变页面元素的样式

<div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>

<script>

document.addEventListener("keydown", function(event) {

if (event.keyCode === 32) { // 空格键的keyCode为32   document.getElementById("myDiv").style.backgroundColor = "blue"; // 改变背景颜色为蓝色 }

});

</script>

keyup事件：当键盘上的某个键被释放时触发

案例1：按下某个键时播放音乐

<audio id="myAudio" src="music.mp3"></audio> 
<script> 
document.addEventListener("keyup", function(event) { 
if (event.keyCode === 65) { // A键的keyCode为65 document.getElementById("myAudio").play(); // 播放音乐 
}
 }); 
</script>

案例2：按下某个键时显示提示信息

<div id="myDiv"></div>

<script>

document.addEventListener("keyup", function(event) {

if (event.keyCode === 27) { // Esc键的keyCode为27          document.getElementById("myDiv").innerText = "按下了Esc键"; // 显示提示信息

}

});

</script>

 六、输入法事件:使用某些输入法时触发的事件

输入法事件是在输入法输入文字时触发的事件，常见的事件有compositionstart、compositionupdate和compositionend。

compositionstart事件：在输入法开始输入时触发

案例1：显示“正在输入”的提示信息

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

 

案例2：在控制台输出输入法开始输入的时间

<input type="text" id="myInput" oncompositionstart="console.log('输入法开始输入：' + new Date())">

compositionend事件：在输入法结束输入时触发

案例1：隐藏“正在输入”的提示信息

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

 案例2：在控制台输出输入法结束输入的时间

<input type="text" id="myInput" oncompositiοnend="console.log('输入法结束输入：' + new Date())">

compositionupdate事件：在输入法更新输入时触发

案例1：实时显示输入的文字

<input type="text" id="myInput" oncompositionupdate="showInputText(event)">

<div id="myDiv"></div>

<script>

function showInputText(event) {

document.getElementById("myDiv").innerText = event.data;

}

</script>

案例2：在控制台输出输入法更新输入的文字

<input type="text" id="myInput" oncompositionupdate="console.log('输入法更新输入：' + event.data)">