回答自Copilot
在 HTML 中，input 元素上的 input、blur、focus 和 change 事件的执行顺序通常如下：
- focus：当输入框获得焦点时触发。
- input：当输入框的内容发生变化时触发。这个事件会在每次输入时触发。
- blur：当输入框失去焦点时触发。
- change：当输入框的内容发生变化并且失去焦点时触发。
例如，以下代码展示了这些事件的执行顺序：
<!DOCTYPE html>
<html>
<head>
<title>Event Order</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('focus', function() {
console.log('focus');
});
inputElement.addEventListener('input', function() {
console.log('input');
});
inputElement.addEventListener('blur', function() {
console.log('blur');
});
inputElement.addEventListener('change', function() {
console.log('change');
});
});
</script>
</head>
<body>
<input type="text" id="myInput" value="Type something">
</body>
</html>
当你点击输入框并输入内容，然后点击其他地方时，控制台会依次输出：
- focus
- input（每次输入时触发）
- blur
- change
