js-事件2_键盘事件 oDiv.style.left=oDiv.offsetLeft-10+"px";

onlcick=onmousedown+onmouseup;

onprass=onkeydown+onkeyup;

offsetWidth :div的实际宽度,包括border+padding+width;

offsetHeight:

offsetLeft:

offsetTop:

键盘控制div移动,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 <meta charset="utf-8" />
    <style>
        div {
        width:100px;
        height:100px;
        background:#F00;
        position:absolute;
        }
    </style>
    <script>
        document.onkeydown = function (ev) {
            var oEvent = ev || event;
            var oDiv = document.getElementById("div1");
            if (ev.keyCode == 37) {
                oDiv.style.left=oDiv.offsetLeft-10+"px";   // offsetLeft  获取div距离左边的实际数值
            }
            if (ev.keyCode == 39) {
                oDiv.style.left = oDiv.offsetLeft + 10 + "px";
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

遗留问题:

一、 按下键盘不松,开始时会卡顿一下。

时间: 2024-08-12 01:36:13

js-事件2_键盘事件 oDiv.style.left=oDiv.offsetLeft-10+"px";的相关文章

js 里面的键盘事件对应的键码

js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Alt_LkeyCode 19 = PausekeyCode 20 = Caps_LockkeyCode 27 = Escape EscapekeyC

js中获取键盘事件

1 <script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要

js中获取键盘事件【转】

<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 document.onkeydown=function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e && e.keyCode==27){ // 按 Esc 5 //要做的

基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件

这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: 要实现以上的功能,需要几个对象: 事件分派器:EventDispatcher,负责将 BaseEvent 分派给 EventListener 对象 事件监听器:EventListener,这只是一个接口类,接受 BaseEvent 的对象,真正的处理在它的子类中实现 事件:BaseEvent,储存

jQuery事件之键盘事件

一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我

由chrome剪贴板问题研究到了js模拟鼠标键盘事件

写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.clipboardData.getData("Text") 可是在chrome下面就行不通了,chrome下面没有类似ie的这种方法,那应该怎么办呢,百度了一下,发现还真有办法. 只要在HTML界面上放上一个text类型的控件,如下所示 <textarea id="textAre

js里面的键盘事件对应的码值

键盘事件对应的码值keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Alt_LkeyCode 19 = PausekeyCode 20 = Caps_LockkeyCode 27 = Escape EscapekeyCode 32 = spacekeyCode 33

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

DOM事件处理程序-事件对象-键盘事件

事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netscape  ---事件捕获流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 使用事件处理程序: 1. HTML事件处理程序 <input type="button" value="按钮" id="btn" onclick=&q