JavaScript 事件

最新推荐文章于 2022-04-28 04:47:01 发布

09jianfeng

最新推荐文章于 2022-04-28 04:47:01 发布

阅读量420

点赞数

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是事件

JavaScript 是基于对象的语言。这与 Java 不同，Java 是面向对象的语言。

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

通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理程序或函数，我们称之为事件处理程序。

二、事件处理程序

在某个事件发生的时候，执行特定的 JavaScript 代码（事件处理程序）。

比如点击页面的某个按钮这是一个很常见的事件，执行对应的事件处理程序，弹出提示小窗口，代码如下：

<html>
<head>
  <script>
    function click_button() {     // 事件处理程序，弹出提示窗
      alert('welcome to shiyanlou');
    }
  </script>
</head>

<body align="center">
  <br></br>
  <button onclick="click_button()">click me</button>  <!--发生事件 onclick 的时候，执行 click_button()-->
</body>
</html>

0401

三、常用事件

除了刚才提到的 onclick 事件，还有这些常用的事件：

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>

鼠标移入时，显示“good”，鼠标移出时显示“you have moved out”：

0402

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>

运行结果可见，按下鼠标时，显示“release your mouse”，背景变为蓝色；松开鼠标后，显示为“press here”，背景变为绿色。

0403

09jianfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件

什么是事件JavaScript 是基于对象的语言。这与 Java 不同，Java 是面向对象的语言。基于对象的基本特征，就是采用事件驱动。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理程序或函数，我们称之为事件处理程序。二、事件处理程序在某个事件发生的时候，执行特定的
复制链接

扫一扫