javascript事件

事件

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>