3.4 JavaScript事件

事件是指用户或浏览器的动作，对于JavaScript脚本语言，浏览器与用户的交互，需要通过响应事件来实现。JavaScript可以监听各节点的事件，一旦被触发，即可响应特定的语句，以实现特定的功能。

3.4.1 常用事件

JavaScript中常见的事件如下。

（1）表单事件

例如：submit事件（提交）、reset事件（重置）、click事件（鼠标单击）、change事件（更改）、focus事件（获取焦点）、input事件（输入）等。

（2）浏览器事件

例如：load事件（加载页面）、unload事件（离开页面）、resize事件（调整窗体大小）、scoll事件（滚动条）等。

（3）鼠标事件

例如：click事件（单击）、dbclick事件（双击）、mouseover事件（鼠标移入）、mouseout事件（鼠标移开）、mousedown事件（鼠标按下）、mouseup事件（鼠标按键弹起）、mousewheel事件（鼠标滚轮）等。

（4）键盘事件

例如：keydown事件（按键按下）、keyup事件（按键弹起）、keypress事件（按键按住）等。

3.4.2 事件添加

JavaScript事件的添加，常用的有HTML属性内联、DOM属性绑定、添加事件监听三种方法。

1.HTML属性内联

HTML属性内联是指直接将事件捆绑在HTML元素上，此方法适用于表单事件。例如提交按钮可以响应submit事件，一般按钮、单选按钮可以响应click事件，输入框、下拉选择框可以响应change事件等。当需要解绑事件时，可以将元素的事件属性赋值为null。例如【例3-22】。

【例3-22】 HTML属性内联示例。

上述代码中，当用户单击button按钮时，button对象会触发一个onclick事件处理程序，clickbutton()用来捕获click事件。

若需要取消click事件的绑定，可以通过DOM的属性设置。

2.DOM属性绑定

DOM属性绑定是指通过添加DOM元素的事件属性来绑定或解绑事件触发的函数。例如【例3-23】。

【例3-23】 DOM属性绑定示例。

运行上例代码，在下拉菜单中，选择“添加button的click事件”，则给button元素通过DOM绑定了click事件属性，并给该属性赋值响应click事件的函数，单击button则出现如图3-20所示的弹窗。在下拉菜单中，选择“取消button的click事件”，则通过给button元素绑定的click事件属性赋值为“null”，删除button的click事件。

图3-20 运行【例3-23】下拉框选择“添加button的click事件”后单击“单击”按钮

3.添加事件监听

通过表3-20中addEventListener()和removeEventListener()方法可以为元素添加或删除事件。例如【例3-24】。

【例3-24】 添加事件监听示例。

上例代码中，button元素的click事件由addEventListener()方法监听，由removeEvent Listener()方法移除。【例3-24】和【例3-23】的运行效果是一样的。