目录
一、事件的定义
HTML 事件可以是浏览器行为，也可以是用户行为。当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生。JS的事件驱动指的就是行为触发代码运行的这种特点。
二、常见事件
1.鼠标事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
2. 键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
3.表单事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
三、事件的绑定
1.通过属性绑定
通过事件属性绑定函数,在行为发生时会自动执行函数
一个事件可以同时绑定多个函数
一个元素可以同时绑定多个事件
方法中可以传入 this对象,代表当前元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过属性绑定事件示例</title>
<script>
function fun1(){
console.log("单击了函数1")
}
function fun2(){
console.log("单击了函数2")
}
function fun3(){
console.log("双击了函数3")
}
function fun4(){
console.log("鼠标悬停了")
}
function fun5(){
console.log("鼠标移动了")
}
function fun6(){
console.log("鼠标离开了")
}
function fun7(){
console.log("键盘按下了")
}
function fun8(){
console.log("按键抬起了")
}
</script>
</head>
<body>
<input
type="button"
value="按钮"
onclick="fun1(),fun2()"
ondblclick="fun3()"
>
<br>
<img src="img/屏幕截图 2024-05-18 162450.png" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()">
<br>
<input type="text" onkeydown="fun7()" onkeyup="fun8()">
</body>
</html>
2.通过DOM编程绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过DOM编程绑定事件示例</title>
<script>
// 页面加载完毕事件,浏览器加载完整个文档行为
window.onload = function(){
var in1 = document.getElementById("in1");
// 通过DOM编程绑定事件
in1.onchange = testChange;
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("按钮点击了");
// 调用事件方法触发事件
in1.onchange();
}
}
function testChange(){
console.log("内容改变");
console.log(event.target.value);
}
</script>
</head>
<body>
<input id="in1" type="text">
<br>
<button id="btn1">按钮</button>
</body>
</html>
四、事件的触发
1.行为触发
在发生行为时触发，例如点击、悬停、输入等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行为触发事件示例</title>
<script>
function handleClick(){
console.log("按钮被点击了");
}
function handleMouseOver(){
console.log("鼠标悬停在图片上");
}
function handleInputChange(){
console.log("输入框内容改变");
}
</script>
</head>
<body>
<button onclick="handleClick()">点击我</button>
<br>
<img src="https://via.placeholder.com/150" alt="示例图片" onmouseover="handleMouseOver()">
<br>
<input type="text" onchange="handleInputChange()">
</body>
</html>
2.DOM编程触发
通过DOM编程,用代码触发,执行某些代码相当于发生了某些行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM编程触发事件示例</title>
<script>
function testFocus(){
console.log("获得焦点（点击并输入状态）")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(value){
console.log("内容改变成" + value)
}
function testChange2(value){
console.log("选项改变成" + value)
}
function testSubmit(){
var flag = confirm("确认要提交表单吗？")
if (!flag){
event.preventDefault(); // 阻止组件的默认行为
return false;
}
return true;
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="01js引入方式.html" method="get" onsubmit="return testSubmit()">
用户昵称：<input
type="text"
name="realName"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this.value)"
>
<br>
登录账号：<input type="text" name="logoinName"><br>
选择籍贯：
<select onchange="testChange2(this.value)">
<option value="1">辽宁</option>
<option value="2">黑龙江</option>
<option value="3">吉林</option>
</select>
<input type="submit" value="注册">
<input type="reset" value="清空" onclick="testReset()">
</form>
</body>
</html>
总结
本篇对JavaScript的事件进行了举例描述，便于理解和复习。部分内容源自网络，如有侵权请联系作者删除，谢谢！
扫一扫
2748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
