1、鼠标事件:
-
鼠标单击事件(click):
方法一 (on+click)
<button id="btn" onclick="alert('88888')">点击弹框</button>
方法二(利用addEventListener)
document.getElementById("btn").addEventListener('click', function(event) {console.log('鼠标单击了页面');
});
方法三:(箭头函数)
document.getElementById("btn").onclick = () => { alert('88888')};
-
鼠标悬停事件(mouseover):
document.getElementById("name").addEventListener('mouseover', function(event) {console.log('鼠标悬停在页面上');
});
-
鼠标移出事件(mouseout):
document.getElementById("name").addEventListener('mouseout', function(event) {console.log('鼠标移出页面了');
});
-
鼠标移入事件(mouseenter):
-
鼠标移出事件(mouseleave):
2、键盘事件:
-
键盘按下事件(keydown):
<body><input type="text" value="" id="name">
</body>
<script>document.getElementById("name").addEventListener("keydown", function (event) {console.log(event.key);if (event.key === "Control") {event.preventDefault(); // 阻止默认行为(例如表单提交)document.getElementById("name").style.color = "blue";}});
</script>
-
键盘松开事件(keyup):
<body><input type="text" value="" id="name">
</body>
<script>document.getElementById("name").addEventListener("keyup", function (event) {console.log(event.key);if (event.key === "Control") {event.preventDefault(); // 阻止默认行为(例如表单提交)document.getElementById("name").style.color = "red";}});
</script>//箭头函数document.getElementById("name").onkeyup = () => {console.log(event.key);if (event.key == "p") {event.preventDefault(); // 阻止默认行为(例如表单提交)document.getElementById("name").style.color = "red";}};
3、焦点事件:
-
获取焦点事件(focus):
document.getElementById('myInput').addEventListener('focus', function() {console.log('输入框获得了焦点');
});
-
失去焦点事件(blur):
document.getElementById('myInput').addEventListener('blur', function() {console.log('输入框失去了焦点');
});
4、表单事件:
表单提交事件(submit):
<form onsubmit="submitForm(event)"><input type="text" id="name" placeholder="请输入姓名" required><input type="email" id="email" placeholder="请输入邮箱" required><button type="submit">提交</button>
</form><script>
function submitForm(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取表单数据var name = document.getElementById("name").value;var email = document.getElementById("email").value;// 执行数据验证或其他处理if (name !== "" && email !== "") {// 验证通过,执行提交操作或其他逻辑console.log("表单提交成功");} else {// 验证失败,给出提示或执行其他操作console.log("请填写完整的姓名和邮箱");}
}
</script>
常见的表单事件包括:
-
onsubmit
:当表单被提交时触发,可以用于验证表单数据的有效性、进行表单数据的处理或发送表单数据到服务器。 -
onreset
:当表单被重置时触发,可以用于清空表单中的输入内容或执行其他重置操作。 -
onfocus
:当表单元素获得焦点时触发,可以用于在用户输入前提供提示或执行其他操作。 -
onblur
:当表单元素失去焦点时触发,可以用于验证用户输入、执行数据处理或执行其他操作。 -
onchange
:当表单元素的值发生改变时触发,适用于下拉列表、复选框等需要监听选项选择改变的情况。
总结:
- 在 HTML 元素的事件属性上,需要加
on
,再加事件名称。 - 在 JavaScript 中通过事件监听器(addEventListener)或直接赋值事件处理函数时,不需要加
on
。