键盘鼠标事件,事件默认行为

220 阅读1分钟

键盘事件:

键盘按下的时候触发

t.onkeydown = function (){console.log('键盘我按下了');}

连续敲击的时候触发

t.onkeypress = function (){console.log('连续按下键盘并抬起的时候触发');}

键盘抬起的时候触发

t.onkeyup = function (){console.log('键盘我抬起了');}

顺序 onkeydown > onkeypress > onkeyup

鼠标事件:

鼠标双击

h1.ondblclick = function(){alert('我双击了') }h1.addEventListener('dblclick',function(){alert('我双击了') })

鼠标在指定的区域内移动事件

h1.onmousemove = function (){console.log('我移动了'); }h1.addEventListener('mousemove',function(){console.log('我移动了'); })

事件默认行为:

取消默认事件 两种方法

a.onclick = function (e){this.style.background = 'red'return false;事件源对象里面的取消默认事件的方法e.preventDefault();}

事件默认行为练习:

style部分:

<style>#div1{width: 150px;height: 200px;background: red;position:absolute;left: 0;top: 0;display: none;}</style>

body部分:

<body>        <div id="div1">            <p>菜单A</p>            <p>菜单B</p>            <p>菜单C</p>        </div>    <script>            let div1 = document.getElementById('div1');            document.oncontextmenu = function(e){                e.preventDefault();                div1.style.display = 'block';                div1.style.left = e.clientX + 'px';                div1.style.top = e.clientY + 'px';            }    </script></body>