前言

在前端的JavaScript学习中，事件操作是必不可少的，我为大家整理了以下的五个案例，可以快速的帮助大家理解事件操作的知识点，仅供参考学习。

一、点击事件（导航栏内容切换功能）

onclick ：当点击时触发，可以用于任何元素

    <style>* {margin: 0;padding: 0;}li {list-style: none;}.tab {width: 490px;margin: 50px auto;}.tab-top {height: 30px;border: 1px solid rebeccapurple;background-color: aquamarine;}.tab-top li {float: left;line-height: 31px;text-align: center;padding: 0 22px;cursor: pointer;}.tab-top .a{background-color: pink;color: #fff;}.content {display: none;}</style>
</head>
<body>
<div class="tab"><div class="tab-top"><ul><li class="a">阿海</li><li>张三</li><li>李四</li><li>王五</li><li>赵六</li><li>孙七</li></ul></div><div class="tab-bottom"><div class="content" style="display: block">1号床</div><div class="content">2号床</div><div class="content">3号床</div><div class="content">4号床</div><div class="content">5号床</div><div class="content">6号床</div></div>
</div>
<script>var top = document.querySelector('.tab-top');var li = document.querySelectorAll('li');var content = document.querySelectorAll('.content');for (var i = 0; i < li.length;i++ ){li[i].setAttribute('index', i);li[i].onclick=function (){for (i = 0; i < li.length; i++) {li[i].className = '';}this.className = 'a';var index = this.getAttribute('index');for ( i = 0; i < content.length; i++) {content[i].style.display = 'none';}content[index].style.display = 'block';}}
</script>
</body>

点击不同的人名切换不同的床位，通过简单的点击事件，实现tab栏内容切换功能

二、移入移出事件（导航栏菜单下拉功能）

这个事件可以归类为鼠标事件，案例比较经典，所以我单独拿出来讲

onmouseover ：当鼠标悬浮时触发
onmouseout ：当鼠标离开时触发

    <style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 40px;margin-left: 15px;text-align: center;border: 1px solid #222222;}.nav li a {display: block;width: 100%;line-height: 40px;color: #333;}.nav>li>a:hover {background-color: pink;}.nav ul {display: none;position: absolute;top: 40px;left: 0;width: 100%;}.nav ul li {border: 1px solid #222222;margin-top: 5px;}.nav ul li a:hover {background-color: pink;}</style>
</head><body>
<ul class="nav"><li><a href="#">前端</a><ul><li><a href="">点赞</a></li><li><a href="">评论</a></li><li><a href="">收藏</a></li></ul></li><li><a href="#">菜菜</a><ul><li><a href="">点赞</a></li><li><a href="">评论</a></li><li><a href="">收藏</a></li></ul></li><li><a href="#">阿海</a><ul><li><a href="">点赞</a></li><li><a href="">评论</a></li><li><a href="">收藏</a></li></ul></li>
</ul>
<script>// 1. 获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个小li// 2.循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}
</script>
</body>

js的移入移出事件是在前端页面设计中必不可少的，主要在导航栏菜单的下拉功能这方面运用较为广泛

三、失去焦点事件（表单检验功能）

onblur ：当失去焦点时触发，常用于input表单元素

<body>
<form><label>密码:<input type="text"></label>
</form>
<script>var inp = document.querySelector('input');inp.addEventListener('blur', function () {if (inp.value.length < 6 || inp.value.length > 12) {alert('密码长度不正确！');}})
</script>
</body>

input文本框为什么需要label属性，我会在后面专门写一篇文章介绍，点击链接疑问解答：input文本框为什么需要label属性

四、鼠标事件（鼠标跟随功能）

onmousemove ：当鼠标移动时触发

    <style>#a {position: absolute;width: 50px;height: 50px;border-radius: 50px;background-color: aquamarine;}</style>
</head>
<body>
<div id="a"></div>
<script>var a = document.getElementById('a');document.addEventListener('mousemove', function (b) {var x = b.pageX;var y = b.pageY;a.style.left = x - 25 + 'px';a.style.top = y - 25 + 'px';})
</script>
</body>

当你鼠标移动的时候，该元素也会跟随移动，在以前的一些网页非常常见，算是一个好玩的案例

五、键盘事件（打飞机案例）

onkeydown ：当键盘按下时触发（可能捕获功能键，如上下左右）

    <style>div {position: absolute;left: 500px;top: 50px;width: 600px;height: 600px;border: 1px solid #cccccc;}#fj{position: relative;left: 250px;top: 250px;width: 100px;height: 100px;}</style>
<body>
<div><img src="fj.png" id="fj" alt="">
</div>
</body>
<script>var fj = document.getElementById("fj");document.onkeydown = function(e){{var e = e || window.e;if (e.keyCode===65){fj.style.left = fj.offsetLeft-10+"px";if (fj.offsetLeft <= 0) {fj.style.left = 0 + 'px';}}if (e.keyCode===87){fj.style.top = fj.offsetTop-10+"px";if (fj.offsetTop <= 0) {fj.style.top = 0 + 'px';}}if (e.keyCode===68){fj.style.left = fj.offsetLeft+10+"px";if (fj.offsetLeft >= 500) {fj.style.left = 500 + 'px';}}if (e.keyCode===83){fj.style.top = fj.offsetTop+10+"px";if (fj.offsetTop >= 500) {fj.style.top = 500 + 'px';}}}}
</script>

当键盘按下WASD等不同键时，飞机就会不同的移动，按照ASCII码，可确定不同键位

总结

以上就是JavaScript的一些事件案例，也是比较基础、经典的案例。
这也是构建网页的一些基本操作，希望大家能将这些案例理解透，这样在JavaScript后面的学习中将会有很大的帮助。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！

JS中常用的事件操作相关推荐

JS中常用的键盘事件与keycode属性
JS中的键盘事件与keycode属性键盘事件键盘事件与鼠标事件类似,同样常出现在开发过程中. 简单介绍三个常见的键盘事件 keydown (识别所有键) keyup (识别所有键) keypres ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
总结JS中常用的数组的方法大全
总结JS中常用的数组方法 JS中常用的数组方法总结数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据.在使用数组时,经常会 ...
js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象--String对象它有以下几个常用的属性: length prototype 有以下几个常用的方法: parseInt()转换为数字 parseFloat()转换为 ...
js中常用的数组和字符串方法
一:js中常用的数组方法 <script>//函数声明式中的方法const arr=[1,3,6,9,15,19,16];//函数的所有方法 map(),reduce(),filter() ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
JS中的click事件无反应
JS中的click事件无反应今天在一个js文件中写了一个click函数,结果在页面中点击后死活没有反应,各种检查之后代码也没问题,就是无法触发click函数.各种百度之后终于找到了问题所在:在点击的 ...
JS中常用正则转换和信息验证的封装（80个）
JS中常用正则转换和信息验证的封装(80个) 邮箱手机号码电话号码是否url地址是否字符串是否数字是否boolean 是否函数是否为null 是否undefined 是否对象是否数组 ...
前端开发：JS中常用数据类型的转换以及使用场景集锦
前言在前端开发中,关于数据转换也是使用频率非常高的知识点,尤其是常见数据类型之间的相互转换的使用频率就更高了,那么本篇博文就来分享一下关于JS中常用数据类型的转换使用,分享一下,方便后期查阅使用. ...

JS中常用的事件操作