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

你可能感兴趣的:(JavaScript,javascript,html,linq)