js常用事件演示
什么是事件
在JavaScript中，事件是指当用户执行某个操作或浏览器发生某个特定的情况时触发的动作。这些操作可以是鼠标点击、键盘按键、页面加载等。通过捕获和处理这些事件，我们可以根据用户的操作或浏览器状态来执行相应的JavaScript代码。
事件可以与HTML元素相关联，当事件发生在该元素上时，我们可以通过JavaScript代码来捕获并处理这些事件。通过给元素添加事件监听器，我们可以指定事件发生时要执行的函数。
常见的事件包括点击事件（click）、鼠标移入事件（mouseover）、键盘按下事件（keydown）、页面加载事件（load）等。可以使用addEventListener()方法来为元素添加事件监听器，或使用HTML标签的属性直接指定事件处理函数。
为什么要使用事件
使用事件的目的是为了实现程序中不同部分之间的通信和交互。事件可以帮助我们在程序中处理异步操作，例如用户触发的事件、网络请求的完成等。通过使用事件，我们可以将程序的不同部分解耦，使得程序更加模块化和可扩展。
使用事件的好处
1. 简化程序逻辑：通过使用事件，可以将程序分解为多个模块，每个模块只需要关注自己感兴趣的事件，而不需要关心其他模块的实现细节。这样可以使得程序逻辑更加清晰、简洁。
2. 提高代码复用性：通过定义事件和事件处理器，可以将同一种事件在多个地方复用。这样可以减少代码的重复编写，并且使得程序的修改更加方便。
3. 实现异步操作：事件机制可以帮助我们处理异步操作，例如在网络请求完成后触发一个事件来通知其他部分进行处理。这样可以避免程序的阻塞，提高程序的响应速度和用户体验。
4. 支持插件式开发：通过定义事件和事件处理器，可以使得程序具有良好的扩展性。其他开发者可以通过注册自己的事件处理器来扩展程序的功能，而不需要修改原有的代码。
总的来说，使用事件可以提高程序的可读性、可维护性和可扩展性，使得程序更加灵活和高效。
js事件的使用
1.当窗口失去焦点时
window.Object=function()
{
console.log("当窗口失去焦点时")
}2.当窗口获得焦点时
window.onfocus=function()
{
console.log("当窗口获得焦点时")
}3.窗口加载事件
window.onload=function ()
{
alert("窗口加载事件")
}4.窗口大小缩放事件
? ? ? ?
window.onresize=function ()
{
alert("窗口大小缩放事件")
}5.内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//内容改变事件
function un1()
{
alert(" 内容改变事件")
}
function un2()
{
alert("当文本框内容改变时 ，立即将改变内容 输出在控制台")
}
</script>
</head>
<body>
<form>
账号<input type="text" onchange="un1()"><br>
密码<input type="password" onchange="un2()"><br>
<input type="reset" name="butReset" value="重置按钮">
<input type="submit" name="butSubmit" value="提交按钮">
</form>
</body>
</html>6.获取表单 未能提交时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// oninvalid:获取表单 未能提交时
function nu()
{
alert("请完成表单的内容")
}
</script>
</head>
<body>
<input type="text" value="whher " oninvalid="nu()" ><br>
</body>
</html>7.文本框内容被选中时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//onselect:当文本框内容被选中时
function nu1()
{
alert("呢已经选择了文本框")
}
</script>
</head>
<body>
文本框<input type="text" value="ssflkjlksdf" onselect="nu1()">
</body>
</html>8.onkeydown：当键盘上的某个按键被按下时触发此事件
window.onkeydown=function (event)
{
event=event || window.event;
console.log("键盘按下了"+event.keyCode);
if(event.keyCode===13)
{
console.log("按下了回车")
}
}9.onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
//onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
window.onkeyup=function (event)
{
event=event || window.event;
console.log("键盘按下了"+event.keyCode);
if(event.keyCode===13)
{
console.log("按下了回车")
}
}10.onkeypress：当输入有效的字符按键时触发此事件
window.onkeypress=function (event)
{
event=event || window.event;
console.log("键盘按下了"+event.keyCode);
if(event.keyCode===13)
{
console.log("按下了回车")
}
}11.鼠标事件
onclick：鼠标单击时触发此事件
ondblclick：鼠标双击时触发此事件
onmousedown：鼠标按下时触发此事件
onmouseup：鼠标弹起时触发的事件
onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove：鼠标移动时触发此事件
onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件
onscroll :当滚动元素的滚动条运行时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onmouseover="divMouseover()"
onmouseout="divMouseout()"
style="width: 300px;height: 300px;background: red">
<div onmouseover="divMouseover()"
onmouseout="divMouseout()"
style="width: 100px;height: 100px;background: pink">
</div>
</div>
<script>
function nu()
{
alert("鼠标单击时触发此事件")
}
function nu1 ()
{
alert("鼠标双击时触发此事件")
}
function nu2 ()
{
alert("鼠标按下时触发此事件")
}
function nu3()
{
alert("鼠标弹起时触发的事件")
}
function nu4 ()
{
alert("鼠标移动到某个设置了此事件的元素上时触发此事件")
}
function nu5 ()
{
alert("鼠标移动时触发此事件")
}
function nu6 ()
{
alert("鼠标从某个设置了此事件的元素上离开时触发此事件")
}
function nu7 ()
{
alert("当滚动元素的滚动条运行时")
}
</script>
<input type="text" onclick="nu()">
<input type="text" ondblclick="nu1()">
<input type="text" onmousedown="nu2()">
<input type="text" onmouseup="nu3()">
<input type="text" onmouseover="nu4()">
<input type="text" onmousemove="nu5()">
<input type="text" onmouseout="nu6()">
<input type="text" onscroll ="nu7()">
</body>
</html>
?
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！