鼠标事件 键盘事件

目录

一、常用的鼠标事件

1、常用鼠标事件

3、图片跟随鼠标移动案例 

二、常用的键盘事件

1、常用键盘事件

2、键盘事件对象

3、模拟快递单号案例

---

一、常用的鼠标事件

1、常用鼠标事件

鼠标事件	触发条件
onclick	鼠标左键触发
onmouseover	鼠标经过触发
onmouseoutonfocus	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

//禁止鼠标右键
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

//禁止鼠标选中
document.addEventListener('selectstart', function(e) {
 e.preventDefault();
 })

2、鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clietY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX	返回鼠标相对于文档页面的 X 坐标  IE9+ 支持
e.pageY	返回鼠标相对于文档页面的 Y 坐标  IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的 X 坐标
e.screenY	返回鼠标相对于电脑屏幕的 Y 坐标

3、图片跟随鼠标移动案例 

案例分析：

① 鼠标不断的移动，使用鼠标移动事件： mousemove

② 在页面中移动，给document注册事件

③ 图片要移动距离，而且不占位置，我们使用绝对定位即可

④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的 top和left 值就可以移动图

实现代码：

二、常用的键盘事件

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 代码

 

        

            
    快递单号：          
      
            
        
    

//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';
            }
        })

运行结果：