目录
一.常用鼠标事件
1、常用鼠标事件
3、图片跟随鼠标移动情况
二.常用键盘事件
1、常用键盘事件
2、键盘事件对象
3、模拟快递单号案例
一、常用鼠标事件1、常用鼠标事件触发条件onclick鼠标左键触发onmouseover鼠标onmouseoutonfocus鼠标离开触发onfocus触发onblur鼠标失去焦点
上下文菜单主要控制何时显示上下文菜单，主要用于程序员取消默认上下文菜单
//document.addevent监听器(context menu )、function(e ) ) {e.preventDefault； )2.禁止检查鼠标(开始检查selectstart ) ) ) ) )。
禁止用鼠标高亮显示//document.addevent监听器(selectstart )、function(e ) { e.preventDefault ) 2、鼠标事件选项
event对象表示事件的状态，是关于事件的一系列信息集合。 在现阶段，主要是鼠标事件对象MouseEvent和键盘事件对象3358www.Sina.com/
鼠标事件对象说明e.clientX后退浏览器窗口显示区域的鼠标x坐标e.clietY后退浏览器窗口显示区域的鼠标y坐标e.pageX后退鼠标文档页面的x坐标IE9支持e.clientX IE9支持e.screenX返回鼠标相对于计算机屏幕的x坐标e.screenY返回鼠标相对于计算机屏幕的y坐标3，以及图像跟随鼠标移动的案例研究。
鼠标不断移动，鼠标移动事件： mousemove
在页面中移动，在document中注册事件
图像移动距离且不定位，使用绝对定位即可
核心原理：鼠标每次移动，我们都可以得到最新的鼠标坐标，将这个x和y坐标作为图像的top和left值来移动图
实现代码：
获取img src='./img1. jpg ' alt=' ' script//1. img对象var pic=document.query selector ' img '； //2 .在文件中获取mousemove事件document.addevent listener (' mousemove '，function(e ) { //3.鼠标在页面上的坐标var x=e.pageX //4 .将鼠标坐标值设置为图
片 pic.style.left= x - 80 +'px'; pic.style.top=y - 80+ 'px' }) </script> 二、常用的键盘事件 1、常用键盘事件事件除了使用鼠标触发，还可以使用键盘触发
键盘事件触发条件onkeyup某个键盘按键被松开时触发onkedown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发 （但是它不识别功能键 比如 ctrl shift 箭头 等）注意：
1. 如果使用addEventListener 不需要加 on
2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
3. 三个事件的执行顺序是： keydown -- keypress --- k
2、键盘事件对象 键盘事件对象属性说明keyCode返回该键的ASCAII 值注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII
3、模拟快递单号案例案例分析
① 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的文字
② 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
③ 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
④ 注意： keydown 和 keypress 在文本框里面的特点： 他们两个事件触发的时候，文字还 没有落入文本框中。
⑤ keyup事件触发的时候， 文字已经落入文本框里面了
⑥ 当我们失去焦点，就隐藏这个con盒子
⑦ 当我们获得焦点，并且文本框内容不为空，就显示这个con盒
//HTML 代码 <div class="search"> <div class="con"></div> <label for=""> 快递单号： <input type="text" placeholder="请输入快递单号" class="num"> </label> </div> //CSS 代码 .search{ position: relative; width: 400px; margin: 100px auto; } .con{ display: none; position: absolute; top: -40px; left: 90px; width: 171px; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before{ content: ""; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } //javaScript 代码 //1.获取dom元素 var con=document.querySelector('.con'); var numInput=document.querySelector('.num'); //2.给input注册keyup事件 numInput.addEventListener('keyup',function(){ if(this.value===''){ //若用户没有输入，则con元素隐藏 con.style.display='none'; } else{ con.style.display = 'block'; con.innerText=this.value; } }) //3.给input注册焦点事件 numInput.addEventListener('blur',function(){ //失去焦点，con隐藏 con.style.display='none'; }) numInput.addEventListener('focus',function(){ //获得焦点，con显示 if(this.value!==''){ con.value.display='block'; } })运行结果：