JavaScript 事件

客官°小女子只卖身不卖艺 2022-05-22 10:52 231阅读 0赞

## JavaScript 事件 ##

事件是可以被 JavaScript 侦测到的行为。

--------------------

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

--------------------

## HTML 事件 ##

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例：

*  HTML 页面完成加载
 *  HTML input 字段改变时
 *  HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:

< *some-HTML-element some-event*= ' *some JavaScript* '>

双引号:

< *some-HTML-element some-event*= " *some JavaScript* ">

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

## 实例 ##

[尝试一下 »][Link 1]

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

## 实例 ##

[尝试一下 »][Link 2]

<table style="background-color:transparent;border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-collapse:collapse;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-spacing:0px 0px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;margin-bottom:15px;margin-left:0px;margin-right:0px;margin-top:15px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;table-layout:fixed;text-align:left;text-decoration:none;text-indent:0px;text-transform:none;white-space:normal;width:700px;word-spacing:0px;"> 
 <tbody style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
  <tr style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <th style="background-color:rgb(255,255,255);border-bottom-color:rgb(204,204,204);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(204,204,204);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(204,204,204);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(204,204,204);border-top-style:solid;border-top-width:.5px;color:rgb(102,102,102);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:10px;padding-left:10px;padding-right:5px;padding-top:10px;width:34px;"><img style="border-bottom-color:rgb(102,102,102);border-bottom-style:none;border-bottom-width:0px;border-left-color:rgb(102,102,102);border-left-style:none;border-left-width:0px;border-right-color:rgb(102,102,102);border-right-style:none;border-right-width:0px;border-top-color:rgb(102,102,102);border-top-style:none;border-top-width:0px;height:32px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;max-width:34px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;width:32px;" alt="Note" src="https://7n.w3cschool.cn/statics/images/course/lamp.jpg"></th> 
   <td style="background-color:rgb(255,255,255);border-bottom-color:rgb(0,0,0);border-bottom-style:none;border-bottom-width:.5px;border-left-color:rgb(0,0,0);border-left-style:none;border-left-width:.5px;border-right-color:rgb(0,0,0);border-right-style:none;border-right-width:.5px;border-top-color:rgb(0,0,0);border-top-style:none;border-top-width:.5px;height:59.34px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:4px;padding-left:10px;padding-right:10px;padding-top:4px;vertical-align:middle;">JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：</td> 
  </tr> 
 </tbody> 
</table>

## 实例 ##

[尝试一下 »][Link 3]

--------------------

## 常见的HTML事件 ##

下面是一些常见的HTML事件的列表:

<table style="background-color:transparent;border-collapse:collapse;border-spacing:0px 0px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;margin-bottom:4px;margin-left:0px;margin-right:0px;margin-top:4px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;table-layout:fixed;text-align:left;text-decoration:none;text-indent:0px;text-transform:none;white-space:normal;width:700px;word-spacing:0px;"> 
 <tbody style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
  <tr style="background-color:rgb(239,239,239);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <th style="background-color:rgb(189,189,189);border-bottom-color:rgb(255,255,255);border-bottom-style:none;border-bottom-width:.5px;border-left-color:rgb(189,189,189);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(189,189,189);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(189,189,189);border-top-style:solid;border-top-width:.5px;color:rgb(255,255,255);font-size:14px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;text-align:left;vertical-align:top;">事件</th> 
   <th style="background-color:rgb(189,189,189);border-bottom-color:rgb(255,255,255);border-bottom-style:none;border-bottom-width:.5px;border-left-color:rgb(189,189,189);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(189,189,189);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(189,189,189);border-top-style:solid;border-top-width:.5px;color:rgb(255,255,255);font-size:14px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;text-align:left;vertical-align:top;">描述</th> 
  </tr> 
  <tr style="background-color:rgb(255,255,255);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onchange</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">HTML 元素改变</td> 
  </tr> 
  <tr style="background-color:rgb(239,239,239);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onclick</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">用户点击 HTML 元素</td> 
  </tr> 
  <tr style="background-color:rgb(255,255,255);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onmouseover</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">用户在一个HTML元素上移动鼠标</td> 
  </tr> 
  <tr style="background-color:rgb(239,239,239);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onmouseout</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">用户从一个HTML元素上移开鼠标</td> 
  </tr> 
  <tr style="background-color:rgb(255,255,255);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onkeydown</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">用户按下键盘按键</td> 
  </tr> 
  <tr style="background-color:rgb(239,239,239);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">onload</td> 
   <td style="border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;font-size:14px;height:38.8px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:7px;padding-left:5px;padding-right:5px;padding-top:7px;vertical-align:top;">浏览器已完成页面的加载</td> 
  </tr> 
 </tbody> 
</table>

更多事件列表: [ JavaScript 参考手册 - HTML DOM 事件][JavaScript _ - HTML DOM]。

--------------------

## JavaScript 可以做什么? ##

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

*  页面加载时触发事件
 *  页面关闭时触发事件
 *  用户点击按钮执行动作
 *  验证用户输入内容的合法性
 *  等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

*  HTML 事件属性可以直接执行 JavaScript 代码
 *  HTML 事件属性可以调用 JavaScript 函数
 *  你可以为 HTML 元素指定自己的事件处理程序
 *  你可以阻止事件的发生。
 *  等等 ...

<table style="background-color:transparent;border-bottom-color:rgb(221,221,221);border-bottom-style:solid;border-bottom-width:.5px;border-collapse:collapse;border-left-color:rgb(221,221,221);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(221,221,221);border-right-style:solid;border-right-width:.5px;border-spacing:0px 0px;border-top-color:rgb(221,221,221);border-top-style:solid;border-top-width:.5px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;font-style:normal;font-variant:normal;font-weight:400;letter-spacing:normal;margin-bottom:15px;margin-left:0px;margin-right:0px;margin-top:15px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;table-layout:fixed;text-align:left;text-decoration:none;text-indent:0px;text-transform:none;white-space:normal;width:700px;word-spacing:0px;"> 
 <tbody style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
  <tr style="margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> 
   <th style="background-color:rgb(255,255,255);border-bottom-color:rgb(204,204,204);border-bottom-style:solid;border-bottom-width:.5px;border-left-color:rgb(204,204,204);border-left-style:solid;border-left-width:.5px;border-right-color:rgb(204,204,204);border-right-style:solid;border-right-width:.5px;border-top-color:rgb(204,204,204);border-top-style:solid;border-top-width:.5px;color:rgb(102,102,102);margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:10px;padding-left:10px;padding-right:5px;padding-top:10px;width:34px;"><img style="border-bottom-color:rgb(102,102,102);border-bottom-style:none;border-bottom-width:0px;border-left-color:rgb(102,102,102);border-left-style:none;border-left-width:0px;border-right-color:rgb(102,102,102);border-right-style:none;border-right-width:0px;border-top-color:rgb(102,102,102);border-top-style:none;border-top-width:0px;height:32px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;max-width:34px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;width:32px;" alt="Note" src="https://7n.w3cschool.cn/statics/images/course/lamp.jpg"></th> 
   <td style="background-color:rgb(255,255,255);border-bottom-color:rgb(0,0,0);border-bottom-style:none;border-bottom-width:.5px;border-left-color:rgb(0,0,0);border-left-style:none;border-left-width:.5px;border-right-color:rgb(0,0,0);border-right-style:none;border-right-width:.5px;border-top-color:rgb(0,0,0);border-top-style:none;border-top-width:.5px;height:59.34px;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-width:40px;padding-bottom:4px;padding-left:10px;padding-right:10px;padding-top:4px;vertical-align:middle;">在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://www.w3cschool.cn/tryrun/showhtml/tryjs_event_onclick1
[Link 2]: https://www.w3cschool.cn/tryrun/showhtml/tryjs_event_onclick
[Link 3]: https://www.w3cschool.cn/tryrun/showhtml/tryjs_events1
[JavaScript _ - HTML DOM]: https://www.w3cschool.cn/jsref/dom-obj-event.html