默认事件、键盘事件
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
怎么阻止：当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用 return false;
<script> //onkeydown : 当键盘按键按下的时候触发 提交的是按下此键之前的那些字母，不包括此键 //onkeyup : 当键盘按键抬起的时候触发 提交的是包括此键在内的字母 /* event.keyCode : 数字类型 键盘按键的值 键值 ctrlKey,shiftKey,altKey 布尔值 当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false */ document.onkeydown = function(ev) { var ev = ev || event; alert(ev.keyCode); } //oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发 document.oncontextmenu = function() { //alert(1) return false; } </script>
Ctrl + 回车 提交留言案例：
<script> window.onload = function() { var oText = document.getElementById('text1'); var oUl = document.getElementById('ul1'); oText.onkeyup = function(ev) { var ev = ev || event; if ( this.value != '' ) { if (ev.keyCode == 13 && ev.ctrlKey) { //判断是否同时按下了Ctrl+回车; var oLi = document.createElement('li'); oLi.innerHTML = this.value; if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi ); } } } } }
方向键控制Div移动案例：
<script> //不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件 //onkeydown : 如果按下不抬起，那么会连续触发
//常用的键码：13【回车】 8【Backspace】 48【0】 57【9】 32【空格】 65【A】
37【左】 38【上】 39【右】 40【下】
//使用定时器来解决键盘延迟的问题。
window.onload = function () { var oDiv = document.getElementsByTagName('div')[0]; var right,left,top,bottom = false; setInterval(function() { if (right) { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } else if (left) { oDiv.style.left = oDiv.offsetLeft - 10 + 'px'; } else if (top) { oDiv.style.top = oDiv.offsetTop - 10 + 'px'; } else if (bottom) { oDiv.style.top = oDiv.offsetTop + 10 + 'px'; } },50); document.onkeydown = function (evt) { var oEvent = evt || event; switch(oEvent.keyCode) { case 37: left = true; break; case 38: top = true; break; case 39: right = true; break; case 40: bottom = true; break; } }; document.onkeyup = function (evt) { var oEvent = evt || event; switch(oEvent.keyCode) { case 37: left = false; break; case 38: top = false; break; case 39: right = false; break; case 40: bottom = false; break; } }; }; </script>
<body> <input type="text"> </body> <script> window.onload = function() { var oInput = document.getElementsByTagName('input')[0]; oInput.onkeydown = function(){ var ev = ev ||event; //阻止除字母、backspace、左右键以外的按键事件 if(ev.keyCode < 65 || ev.keyCode > 90){ if(ev.keyCode != 8 && ev.keyCode != 37 && ev.keyCode != 39){ return false; } } } } </script> </head>
