事件基础(二)键盘的事件

  onclick=onmouseup+onmousedown

  onkeypress=onkeydown+onkeyup

  keyCod(键值,键盘上每个键都对应一个唯一的值)

offset

offsetWidth,offsetLeft,offsetHeight ……代表的是实际的值

获取键盘的值需要用到事件对象event,火狐下用ev

键盘控制div的移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById(‘div1‘);

    //←        37
    //右        39

    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
    }
    else if(oEvent.keyCode==39)
    {
        oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
    }
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

Question:比如在做一个坦克大战的游戏中,按下方向键以后,坦克应该持续移动,而不是先移动一下,然后停顿一下,然后再继续移动。如何解决这个小问题?

键盘事件的获取:Ctrl+Enter留言

其实键盘事件 的函数和鼠标的事件是一致的,函数内容完全相同。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script>
 7 window.onload=function ()
 8 {
 9     var oBtn=document.getElementById(‘btn1‘);
10     var oTxt1=document.getElementById(‘txt1‘);
11     var oTxt2=document.getElementById(‘txt2‘);
12
13     oBtn.onclick=function ()
14     {
15         oTxt1.value+=oTxt2.value+‘\n‘;
16         oTxt2.value=‘‘;
17     };
18
19     oTxt2.onkeydown=function (ev) //记住:是在文本框的基础上加的事件
20     {
21         var oEvent=ev||event;
22
23         if(oEvent.ctrlKey && oEvent.keyCode==13)
24         {
25             oTxt1.value+=oTxt2.value+‘\n‘;
26             oTxt2.value=‘‘;
27         }
28     };
29 };
30 </script>
31 </head>
32
33 <body>
34 <textarea id="txt1" rows="10" cols="40"></textarea><br />
35 <input id="txt2" type="text" />
36 <input id="btn1" type="button" value="留言" />
37 </body>
38 </html>
时间: 2024-10-05 13:58:45

事件基础(二)键盘的事件的相关文章

js学习总结----移动端事件基础及常用的事件库

一.事件基础 PC:click.mouseover.mouseout.mouseenter.mouseleave.mousemove.mousedown.mouseup.mousewheel.keydown.keyup.load.scroll.blur.focus.change... 移动端:click(单击).load.scroll.blur.focus.change.input(代替keyup.keydown)...TOUCH事件模型(处理单手指操作).GESTURE事件模型(处理多手指操作

蓝鸥Unity开发基础二——课时27 事件

事件 Event和delegate的关系就好像字段和属性的关系 Event会限制delegate不能够直接赋值操作,防止将委托替换掉,只能使用+=和-=来绑定或者解除绑定 Event还限定了delegate只能在定义的类中被调用 推荐视频讲师博客:http://11165165.blog.51cto.com/ using System; namespace Lesson_27{    public  delegate void  Something(string  name); public  

WPF路由事件二:路由事件的三种策略

一.什么是路由事件 路由事件是一种可以针对元素树中的多个侦听器而不是仅仅针对引发该事件的对象调用处理程序的事件.路由事件是一个CLR事件. 路由事件与一般事件的区别在于:路由事件是一种用于元素树的事件,当路由事件触发后,它可以向上或向下遍历可视树和逻辑树,他用一种简单而持久的方式在每个元素上触发,而不需要任何定制的代码(如果用传统的方式实现一个操作,执行整个事件的调用则需要执行代码将事件串联起来). 路由事件的路由策略: 所谓的路由策略就是指:路由事件实现遍历元素的方式. 路由事件一般使用以下三

移动开发基础(二)-touch事件

手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的. 先了解一些规范 手指触摸屏幕可以触发的几个事件  touchstart:触摸开始的时候触发  touchmove:手指在屏幕上滑动的时候触发  touchend:触摸结束的时候触发 每一个触摸事件都会产生一个触摸事件对象,对象包含的公共事件属性(他们都是TouchList类型的对象里面装着Touch对象),而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

Javascripts事件基础和事件绑定

javascript事件基础和事件绑定一.事件驱动    1.事件    javascript侦测到的用户的操作或是页面的一些行为    2.事件源    引发事件的元素(发生在谁身上)    3.事件处理的程序    对事件处理的程序或是函数(发生什么事)二.事件分类    1.鼠标事件    onclick 鼠标单机时触发此事件:    ondblclick 鼠标双击时触发此事件:    onmousedown 按下鼠标时触发此事件:    onmouseup 鼠标按下后松开鼠标时触发此事件

JQuery_事件基础

JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.jQuery 为开发者更有效率的编写事件行为, 封装了大量有益的事件方法供我们使用. 一.事件绑定 jQuery 通过.bind()方法来为元素绑定这些事件. 可以传递三个参数: bind(type, [data], fn),type 表示一个或多个类型的事件名字符串:[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串.一个

Event 事件 - 基础

事件驱动三要素 事件源:即触发事件的元素 事件:被JavaScript检测到的行为.例如: 鼠标点击 键盘按键 选输入框 事件处理函数:事件发生时要进行的操作,又叫做"事件句柄"或"事件监听器" 事件分类: 鼠标事件:    click 鼠标点击操作 dblclick   鼠标双击操作 mousedown    按下鼠标按键 mousemove 鼠标指针在元素上方移动 mouseover     鼠标指针进入元素 mouseout·  鼠标指针移出元素 键盘事件:

JS事件基础和绑定

一.事件的分类 鼠标事件 键盘事件 表单事件 页面事件 二.事件驱动 .事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 事件源 引发事件的元素.(发生在谁的身上) 事件处理程序 对事件处理的程序或是函数 (发生了什么事) 三.事件的绑定 在脚本中绑定 直接在HTML元素绑定 四.同个元素添加绑定多个事件 手动输入,自定义 IE: 对象.attachEvent("事件(on)","处理程序")   添加 对象.detachEvent(&q

mfc 鼠标、键盘响应事件

一.基本目标 1.有一个基本的MFC程序,点击“关闭”则“关闭”这个程序,这点没什么好讲的,把自带的“取消”按钮,右键->属性的Caption改成“关闭”二字就可以了 2.鼠标在对话框中移动,则显示其位置信息,这个坐标是窗口内部坐标 3.如果按着鼠标右键移动鼠标,则在这个工程的标题栏会显示“按着鼠标右键移动鼠标”,松开鼠标右键回复如初 4.如果按着键盘上的Ctrl键或者Shift键在对话框的窗口中移动鼠标,标题栏同样会有相应的提示,是否同时按下也会有提示 5.左击对话框,会弹出对话框,显示鼠标位