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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值