键盘事件:
键盘按下的时候触发
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>