Javascript之DOM学习（鼠标事件、键盘事件）
本次总结来自B站视频：感谢大佬的分享
一、图片跟随鼠标案例
let img = document.querySelector('img')document.addEventListener('mousemove', function (e) {// 1. mousemove()只要鼠标移动1px， 就触发这个事件console.log(e.pageX, e.pageY)// 2. 核心原理： 每次移动鼠标，获取鼠标位置并赋值给图片的坐标// 3. 加单位并转为字符串img.style.left = e.pageX-30 +'px'img.style.top = e.pageY-30 +'px'})二、键盘事件
模仿京东商城按S即可将焦点放在搜索框
let search = document.querySelector('input')document.addEventListener('keyup', function (e) {e = e || window.event// 写法一：if (e.key === 's') {search.focus()}// 写法二：// if (e.code === 'KeyS') {// search.focus()// }})
老师用得e.keyCode已经被弃用，虽然绝大部分浏览器目前还支持，但在WebStorm上已经划线，有强迫症不喜欢用。可以选择用上面的两种写法代替，还不用先测试想要按下的那个键的ASCII码是什么。而且我还发现，e.key的值是可以区分大小写的，但不能区分是哪个按键，比如小键盘的数字和大键盘的数字，而e.code不能区分大小写，但可以区分是哪个按键，概括说就是e.key是按值区分而按按键区域区分，e.code不按值区分但按按键区域区分（有点拗口xixi~）
仿订单查找案例
<html lang="en">
<head><meta charset="UTF-8"><title>JDtitle><style>.con {display: none;}style>
head>
<body>
<div class="search"><p class="con">p><input type="text">
div><script>/** 描述：文本框输入内容，显示隐藏域，并复制到隐藏域中；文本框失去焦点则隐藏，获得焦点则显示* */let con = document.getElementsByClassName('con')[0]let search = document.querySelector('input')search.addEventListener('keyup', function () {if (this.value !== '') {con.style.display = 'block'con.innerText = this.value} else {con.style.display = 'none'}})search.addEventListener('blur', function () {con.style.display = 'none'})search.addEventListener('focus', function () {if (search.value !== '') {con.style.display = 'block'}})
script>
body>
html>
学完这节，真正意识到JS的魅力，网页的动态之美，三种语言的结合，标特否。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！