Input 点击触发的事件顺序
点击 input 元素依次触发的事件及其顺序
问题
点击一个 input 元素，会依次触发哪些事件？
解答
点击 input 元素会按以下顺序触发事件：
mousedown- 鼠标按下focus- 获得焦点（如果之前没有焦点）mouseup- 鼠标释放click- 点击完成
验证代码
<!DOCTYPE html>
<html>
<head>
<title>Input 事件顺序</title>
</head>
<body>
<input type="text" id="myInput" placeholder="点击我">
<div id="log"></div>
<script>
const input = document.getElementById('myInput');
const log = document.getElementById('log');
// 记录事件触发顺序
const events = ['mousedown', 'focus', 'mouseup', 'click'];
events.forEach(eventName => {
input.addEventListener(eventName, () => {
log.innerHTML += `${eventName}<br>`;
console.log(eventName);
});
});
</script>
</body>
</html>完整的鼠标事件顺序
如果考虑更多事件，完整顺序是：
const input = document.getElementById('myInput');
const allEvents = [
'mouseenter', // 鼠标进入（不冒泡）
'mouseover', // 鼠标进入（冒泡）
'mousemove', // 鼠标移动
'mousedown', // 鼠标按下
'focus', // 获得焦点
'mouseup', // 鼠标释放
'click', // 点击
];
allEvents.forEach(event => {
input.addEventListener(event, () => console.log(event));
});
// 点击 input 输出：
// mouseenter
// mouseover
// mousemove (可能多次)
// mousedown
// focus
// mouseup
// click双击事件顺序
// 双击时的事件顺序
// mousedown -> focus -> mouseup -> click
// mousedown -> mouseup -> click -> dblclick关键点
focus事件在mousedown之后、mouseup之前触发click事件在mouseup之后触发，是鼠标按下并释放的完整动作- 如果 input 已有焦点，再次点击不会触发
focus事件 - 在
mousedown中调用preventDefault()可以阻止 input 获得焦点 - 双击时会触发两次
click，最后触发一次dblclick
目录