鼠标事件 键盘事件

目录

一、常用的鼠标事件

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 值就可以移动图

实现代码：

<img src="./img1.jpg" alt="">

    <script>
        //1.获取img对象
        var pic=document.querySelector('img');
        //2.给文件注册mousemove事件
        document.addEventListener('mousemove',function(e){
        //3.获取鼠标在页面中的坐标
            var x =e.pageX;
            var y=e.pageY;
            //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';
            }
        })

运行结果：