JavaScript中的事件

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangshouchang/p/6640490.html

文章标签：

#javascript #java #ViewUI

本文介绍了JavaScript中的事件驱动机制，详细解释了基于对象语言的特点，并列举了一系列常用事件处理程序，如单击、双击等，同时提供了两个具体示例帮助理解。

首先明确的是JavaScript的事件驱动的

JavaScript是基于对象的语言，而java是面向对象的语言

基于对象的基本特征就是采用事件的驱动

鼠标和基本的热键的动作我们称作是事件，由鼠标和热键引发的一连串程序的动作，称之为事件驱动。

对事件处理的程序或者函数，我们称为事件处理程序

有哪些事件处理程序

常用的事件

onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点

onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开

onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开

　　下面用一个例子来说明基本的事件处理程序

　　onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数

<html>
<head></head>

<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"

onmouseover="this.innerHTML='good'"

onmouseout="this.innerHTML='you have moved out'"

>move your mouse to here</div>
</body>

</html>

下面是另外一个事件处理程序的实例

onmousedown, onmouseup 是鼠标压下和松开的事件。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件。举例说明：

<html>
<head>
  <script>

    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }

    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }

  </script>
</head>

<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"

onmousedown="mDown(this)"

onmouseup="mUp(this)"

>press here</div>
</body>

</html>