前端JavaScript（六）---JS中的事件
什么是事件
可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为.绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互
事件的绑定和触发
给页面上的元素先绑定事件 然后通过行为去触发
鼠标事件
| 属性 | 描述 | DOM |
| onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
|
| ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
| onmousedown | 鼠标按钮被按下。 | 2 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
| onmouseleave | 当鼠标指针移出元素时触发 | 2 |
| onmousemove | 鼠标被移动。 | 2 |
| onmouseover | 鼠标移到某元素之上。 | 2 |
| onmouseout | 鼠标从某元素移开。 | 2 |
| onmouseup | 鼠标按键被松开。 | 2 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
<script>
function fun1(){
console.log("双击666")
}
function fun2(){
console.log("鼠标按下")
}
function fun3(){
console.log("鼠标抬起")
}
function fun4(){
console.log("鼠标进入")
}
function fun5(){
console.log("鼠标离开")
}
function fun6(){
console.log("鼠标移动")
}
</script>
</head>
<body>
<div class="d1"
ondblclick="fun1()"
onmousedown="fun2()"
onmouseup="fun3()"
onmouseenter="fun4()"
onmouseleave="fun5()"
onmousemove="fun6()">
</div>
</body>
</html>
键盘事件
| 属性 | 描述 | DOM |
| onkeydown | 某个键盘按键被按下。 | 2 |
| onkeypress | 某个键盘按键被按下并松开。 | 2 |
| onkeyup | 某个键盘按键被松开。 | 2 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
console.info("按钮按下")
}
function fun2(){
console.info("按钮抬起")
}
function fun3(){
console.info("按钮按下并抬起")
}
</script>
</head>
<body>
<input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
</body>
</html>
表单事件
| 属性 | 描述 | DOM |
| onblur | 元素失去焦点时触发 | 2 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| onfocus | 元素获取焦点时触发 | 2 |
| onfocusin | 元素即将获取焦点时触发 | 2 |
| onfocusout | 元素即将失去焦点时触发 | 2 |
| oninput | 元素获取用户输入时触发 | 3 |
| onreset | 表单重置时触发 | 2 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
|
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
| onsubmit | 表单提交时触发 | 2 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){console.log("获得焦点");}
function fun2(){console.log("失去焦点");}
function fun3(){console.log("正在输入");}// 只要输入了,就会触发
function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
function fun5(sel){console.log("内容发生改变了"+sel.value)}
function fun6(){
alert("发生了提交事件");
// 做了一些运算之后 动态决定表单能否提交
return false ;
}
function fun7(){
console.log("发生了重置事件");
return true;
}
</script>
</head>
<body>
<form method="get" action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
<input name="" value="" type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
<select name="city" onchange="fun5(this)">
<option selected>-请选择城市-</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
</select>
<br />
<input type="submit" value="提交数据" />
<input type="reset" value="重置数据" />
</form>
</body>
</html>页面加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function testFun(){
var in1=document.getElementById("i1");
var v1=in1.value;
console.log(v1)
}
</script>
</head>
<body onload="testFun()">
<input type="text" value="测试文字" id="i1" />
</body>
</html>
总结
本篇文章介绍了常见的JavaScript事件及其绑定和触发机制。事件是指浏览器或用户与页面交互时触发的行为，JavaScript可以根据不同的事件类型绑定相应的处理代码，实现页面与用户的互动。文章详细列出了几种常用事件，如鼠标事件（onclick、onmousedown、onmouseenter等）、键盘事件（onkeydown、onkeyup、onkeypress）以及表单事件（onblur、onchange、onsubmit等）。通过HTML元素的属性，开发者可以为页面元素绑定这些事件，触发时执行相应的处理函数。此外，还介绍了页面加载时的事件（onload），如通过onload事件可以在页面加载完成后执行特定的JavaScript代码。展示了如何通过事件和事件处理函数实现动态交互，增强网页的用户体验。