javascript 小程序 求大神讲解 10
function handleEvent()
{
var oTextbox = document.getElementById("txt1");
oTextbox.value += " " + event.type; //event是所触发的事件对象
}
</script>
<body>
请在文本框中操作键盘：
<input type="text" id="txt" size="5" onkeydown="handleEvent()"
onkeyup="handleEvent()"
onkeypress="handleEvent()"/>
<textarea id="txt1" rows="6" cols="30"></textarea>
</body> 展开
第一：需要明白什么是“事件”。一般的网页只能够看，不能对网页进行输入和修改等。JavaScript能做到的一件事情是：能够让打开网页的人不只是看网页，还能在网页中输入或者修改一些东西或者用鼠标键盘做一些事情，这就叫“事件”（那些写书的王八蛋一般写到事件就是从头到尾不停说代码，从不解释什么是事件）。你这个例子来说就是：键盘事件。键盘事件就是按一个键盘按键，然后键盘按键在你放手后会弹起来。这个简单的过程可以有两种过程：
（比如按 H 按键）1.1按下H按键； 1.2输入H； 1.3H按键弹起来
（比如按返回按键——大回车键头上那个按键）2.1按下返回按键；2.2返回按键弹起来
你这个代码就是想把以上两种情况显示出来。
第二：过程：
1.<input>标签有三个事件实现“第一种的键盘过程”，onkeydown事件，键盘按键按下；onkeypress事件，键盘输入（如果有输入的话，例如按H按键）；onkeyup事件，键盘按键弹起来。
2.每个按键事件等于一个函数，这里的函数你可以理解为一个执行你的命令的机器人，你按下一个按键就等于你指挥这个小机器人去做一些你安排好的事情。这些事情是什么呢？来看JavaScript的这个handleEvent()函数：
第一步：var oTextbox = document.getElementById("txt1"); 这个机器人读取你的HTML文档，通过id=txt1得到<textarea id="txt1" rows="6" cols="30"></textarea>这个东西，请注意，这个机器人是个智商极其低下的家伙，所以不能像我们一样理解<textarea>这个元素有很多内容，所以需要按照固定的格式表达这个元素的意义给机器人明白。所以document.getElementById("txt1")其实就相当于我们人类理解的<textarea>这个元素。给document.getElementById("txt1")取一个名字oTextbox其实为了方便我们人类写程序和阅读程序的方便。总之取了名字之后
var oTextbox = document.getElementById("txt1")
oTextbox和document.getElementById("txt1")都表示<textarea>这个元素
第二步：oTextbox.value += " " + event.type这是个简写的运算过程，完整过程是这样：
oTextbox.value = oTextbox.value + （" " + event.type）
这个过程包括很多步骤：
oTextbox.value即<textarea>这个元素的文本框内容，在我们没有输入东西之前，这个文本框是空的
（" " + event.type） “”这个是空字符，用空字符加上另外一个数据，那么另外一个数据会自动转换为字符形式。event.type是什么呢？event在这个例子中就是按键按下，按键输入，按键弹起来，event.type就是keydown，keypress，keyup。所以，如果按H按键，那么整个过程就是：H按键按下，指挥机器人执行handleEvent()函数，函数执行到这一步，event.type得到keydown。（" " + event.type）就得到（“” + keydown），那结果就是“keydown”
oTextbox.value一开始是空，所以oTextbox.value + （" " + event.type）就得到“keydown”
oTextbox.value = “keydown”就是使oTextbox的文本值等于keydown，oTextbox就是document.getElementById("txt1")，也就是<textarea>这个元素，所以<textarea>这个元素的文本框内容就看见keydown
同样的，当我们按下H按键，跟着就是输入H，那么输入H也等于onkeypress，就是命令机器人执行handleEvent()函数，那就是重复第一步，第二步的过程，稍微不同的是，执行到第二步2的时候，event.type的值是keypress。而第二步3，oTextbox.value因为已经有H按键按下这个动作，所以此时会使oTextbox.value=”keydown“。
同样的，输入H之后，跟着就是H按键弹起来，H按键弹起来等于onkeyup，就是命令机器人执行handleEvent()函数，那就是重复第一步，第二步的过程，稍微不同的是，执行到第二步2的时候，event.type的值是keyup。而第二步3，oTextbox.value因为已经有H按键按下和H按键输入这个动作，所以此时会使oTextbox.value=”keydown keypress“。
所以，如果你按一个能输入的按键，那么会看见 keydown keypress keyup。如果你按一个不能输入的按键，那么会看见 keydown keyup，因为之间没有输入，所以就没有keypress。
所以，整个过程是，<input>元素有一个按键事件，这个按键事件指挥机器人执行handleEvent()函数，然后把函数得到的结果输出在<textarea>文本框中。
这个程序就是监控ID为txt的文本框按键行为，并把行为显示在ID为txt1的文本域中。keydown keypress keyup
