<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单事件</title>
</head>
<body>
<!-- 简单的HTML表单 -->
<form id="myForm">
姓名: <input type="text" id="name" value="在此处输入你的姓名"> <br>
邮箱: <input type="email" id="email" value="在此处输入你的邮箱"> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
// 获取表单元素
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
// 阻止表单的“默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））
// 然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证
// 在这些情况下，你需要阻止表单的默认提交行为。
// 比如： 你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，
// 电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单
event.preventDefault();
// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
// 你可以在这里添加其他代码来处理表单数据
// 例如，获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
}
);
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);
// 获取文本输入框元素
const inputElement = document.getElementById('name');
// 添加 select 事件监听器
inputElement.addEventListener('select',
function(event) {
// 输出选择的文本范围（起始位置和结束位置）
// Event.target属性返回事件当前所在的节点
console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);
// 你也可以获取并输出实际选中的文本，但需要注意浏览器兼容性
// 以下代码在大多数现代浏览器中有效，但在某些旧版浏览器中可能不适用
// 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引
const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);
console.log('已选中文本:', selectedText);
// 对于更简单的用途，你可能只想输出一条消息来表示事件已被触发
alert('输入框中的文本被选中了！！！');
}
);
</script>
</body>
</html>