讲给后台程序员看的前端系列教程(38)——事件处理

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

事件概述

事件被看作是JavaScript与 页之间交互的桥梁，当事件发生时，可以通过JavaScript 代码执行相关的操作。例如，用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实，在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。

事件模型

在此介绍JavaScript事件模型中的几个重要概念。

事件类型

事件类型(event type)是一个用于标明事件类型的字符串。例如：“click”表示单击事件；”load”表示页面或者图片加载完成的事件

事件目标

事件目标(event target)表示触发事件的对象。比如，点击button后发出一个click事件，那么该button就是事件目标也叫做事件源

事件

简单地来说，事件(event)=事件类型(event type)+事件目标(event target)。通常情况下我们描述一个事件都会包括两方面的信息：事件类型和事件目标。比如：页面中的红色button触发了click事件

事件监听器

事件监听器(event listener)也叫做事件处理器(event handler)，顾名思义，它就是用于处理或者响应事件的JavaScript函数。

常见事件举例

在此，列举几个JavaScript常见的事件：

onclick 表示单击事件
onchange 表示域内容发生变化
onload 表示页面或图像被加载完成
onmousemove 表示鼠标移动
onmouseover 表示鼠标移到元素之上
onfocus 表示元素获得焦点
onselect 表示文本被选定

事件绑定及其处理

在此介绍JavaScript中几种常用的事件绑定及其处理的方式。

方式一：利用标签属性绑定事件处理函数

语法如下：

在该语法中，标签名可以是任意的HTML标签，如div标签、button标签等等；事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；事件的处理程序指的是JavaScript代码，如匿名函数等。

示例如下：

结果如下：