18.常见鼠标和键盘事件以及事件对象

目录

一、常见鼠标事件

1. 禁止右键菜单  contextmenu

2. 禁止选中文字  selectstart

3. 鼠标移动事件：mousemove

二、常见键盘事件

1. onkeyup 按键弹起时触发

2. onkeydown  按键按下时候触发

3. onkeypress  按键按下时候触发  不能识别功能键：ctrl 、alt、shift 、左右箭头等

---

一、常见鼠标事件

1. 禁止右键菜单  contextmenu

document.addEventListener('contextmenu', function(e){

    e.preventDefault();

})

2. 禁止选中文字  selectstart

document.addEventListener('selectstart', function(e){

    e.preventDefault();

})

3. 鼠标移动事件：mousemove

1、图片要移动距离，而且不占位置，使用绝对定位

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

        var img = document.querySelector('img');

        document.addEventListener('mousemove', function(e) {

            var x = e.pageX;

            var y = e.pageY;

            console.log('x坐标是：' + x, 'y坐标是：' + y);

            img.style.left = x - 120 + 'px';

            img.style.top = y - 120 + 'px';

        })

---

二、常见键盘事件

1. onkeyup 按键弹起时触发

        document.addEventListener('keyup', function() {

                console.log('我弹起来的');

            })

2. onkeydown  按键按下时候触发

        document.addEventListener('keydown', function() {

                console.log('我被按下了down');

            })

3. onkeypress  按键按下时候触发  不能识别功能键：ctrl 、alt、shift 、左右箭头等

        document.addEventListener('keypress', function() {

            console.log('我被按下了press');

        })

注意：

• 如果使用addEventListener 不需要加 on

• onkeypress 和前面2个的区别是，他不识别功能键位

• 三个事件的执行顺序是：keydown   keypress   keyup