事件
JavaScript事件是在网页上发生的动作,可以被浏览器检测到。这些事件可以由用户或浏览器本身触发
鼠标事件:
click:当鼠标被单击时触发。
mouseover:当鼠标移动到元素上时触发。
mouseout:当鼠标移出元素时触发。
mousemove:当鼠标指针移动到元素上时触发。
键盘事件:
keydown:当按键按下时触发。
keyup:当按键释放时触发。
keypress:按键被按下时触发。
表单事件:
submit:当表单提交时触发。
change:当元素的值更改时触发。
input:当输入元素的值更改时触发。
窗口事件:
load:当页面加载完成时触发。
resize:当浏览器窗口大小调整时触发。
scroll:当文档被滚动时触发。
焦点事件:
focus:当元素获得焦点时触发。
blur:当元素失去焦点时触发。
媒体事件:
play:当媒体播放开始时触发。
pause:当媒体播放暂停时触发。
拖拽事件:
dragstart:当拖动操作开始时触发。
dragend:当拖动操作结束时触发。
绑定事件
要在JavaScript中处理事件,可以使用事件监听器。以下是一个示例,向按钮元素添加点击事件监听器:
//此种方法通过DOM方式来绑定事件
window.onload = function(){
// 获取按钮元素
const button = document.getElementById('myButton');
// 添加点击事件监听器
button.addEventListener('click', function() {
alert('按钮被点击了!');
});
}
表单事件
onchange 事件
当表单元素的值改变时触发。
示例:
<input type="text" id="myInput" onchange="handleChange()">
<script>
function handleChange() {
alert("Input value has changed!");
}
</script>
onsubmit 事件
当表单提交时触发。
示例:
<form onsubmit="return validateForm()">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
// Perform form validation
return true; // Return false to prevent form submission
}
</script>
onfocus 和 onblur 事件
onfocus 当表单元素获得焦点时触发,onblur 当表单元素失去焦点时触发。
示例:
<input type="text" id="myInput" onfocus="handleFocus()" onblur="handleBlur()">
<script>
function handleFocus() {
console.log("Input is focused");
}
function handleBlur() {
console.log("Input lost focus");
}
</script>
onkeydown、onkeyup 和 onkeypress 事件
onkeydown 当按下键盘按键时触发,onkeyup 当释放键盘按键时触发,onkeypress 当按下并释放键盘按键时触发。
示例:
<input type="text" id="myInput" onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)" onkeypress="handleKeyPress(event)">
<script>
function handleKeyDown(event) {
console.log("Key down: " + event.key);
}
function handleKeyUp(event) {
console.log("Key up: " + event.key);
}
function handleKeyPress(event) {
console.log("Key pressed: " + event.key);
}
</script>
oninput 事件
当表单元素的值发生改变并且失去焦点时触发。
示例:
<input type="text" id="myInput" oninput="handleInput()">
<script>
function handleInput() {
console.log("Input value changed: " + document.getElementById("myInput").value);
}
</script>