3. JavaScript事件处理

最新推荐文章于 2024-07-12 09:36:48 发布

琢磨鸟

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量1.3k

点赞数

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用户可以通过多种方式与浏览器中的页面进行交互，而事件是交互的桥梁。 Web开发人员可以通过JavaScript内置的或者自定义的事件处理器来响应用户的动作。

什么是事件

广义上讲，Javascript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应（如鼠标移动、当前页面的载入关闭，键盘输入，拖拽页面图片，单击浮动菜单等）。

事件处理器 是指与特定的文本和特定的事件相关联的JavaScript代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件从而进行改变或的处理过程即称为事件处理。

下面是简单的事件触发和处理的过程示意图：

事件触发和处理的过程示意图

事件捆绑

HTML文档将元素的常用事件当做属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就会被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在所处对象的事件处理器中。

示例：

<a href="http://www.baidu.com/" οnclick=MyClick()">我是超链接</a>

function MyClick(){

alert("点击了超链接");

}

1. HTML文档事件

HTML文档事件包括用户载入目标页面知道该页面被关闭期间浏览器的动作及该页面对用户操作的响应。主要分为：浏览器事件和 HTML元素事件两大类。

1.1 浏览器事件

浏览器事件指：载入文档知道该文档被关闭期间的浏览器事件。如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获取焦点事件onfocus、拖动滚动条事件onscroll、调整窗口大小事件onresize等。

1.2 HTML元素事件

载入页面后，用户与页面的交互主要指发生在如按钮、链接、表单、图片等HTML元素上的用户动作以及该页面对此动作所作出的响应。如鼠标单击按钮事件（元素为button，事件为click，事件处理器为onclice）。只要了解了该事件的相关信息，就可以编写针对此接口的事件处理程序，也称事件处理器，以完成诸如表单验证、文本框内容选择等功能。

HTML文档中元素对应的事件因元素类型而异，下表按HTML4标记类型列出了当前通用版本浏览器上支持的事件：

通用浏览器上定义的事件
标记类型	标记列表	事件触发模型	简要说明
连接	<A>	onclick ondbclick onmouseDown onmouseOut onmouseOver onmouseUp onKeyDown onkeyPress onkeyUp	鼠标单击链接鼠标双击连接鼠标在链接的位置按下鼠标移出链接所在的位置鼠标经过连接所在的位置鼠标在链接的位置放开键被按下按下并放开该键键被松开
图片	<IMG>	onerror onload onkeyDown onkeyPress onkeyUp	加载图片出错图片被加载时触发键被按下按下并松开该键键被松开
区域	<AREA>	onDbClick onMouseOut onMouseOver	双击该图形映射区域鼠标从该图形映射区域内移动到之外鼠标从该图像映射区域外移动到之内
文档主体	<BODY>	onBlur onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp
帧、帧组	<FRAME> <FRAMESET>	onblur onerror onfocus onload onresize onunload
窗体	<FORM>	onReset onSubmit
按钮	<INPUT TYPE= "button">	onBlur onClick onFocus onMouseDown onMouseUp
复选框单选框	<INPUT TYPE= "checkbox"> ="radio"	onBlur onClick onFocus
复位按钮提交按钮	<INPUT TYPE= "reset"> ="submit"	onBlur onClick onFocus
口令字段	<INPUT TYPE= "password"	onBlur onFocus
文本字段	<INPUT TYPE= "text">	onBlur onChange onFocus onSelect
文本区	<TEXTAREA>	onblur onchange onfocus onKeyDown onKeyPress onKeyup onSelect
选项	<SELECT>	onblur onchange onfocus

出于友好、保密、版权等方面的考虑，通用浏览器上实现的事件已经不能满足Javascript开发人员的需求，各大浏览器厂商都更新了自己的事件模型，扩展了自身支持的事件类型。

琢磨鸟

关注

0
点赞
踩
0

收藏

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

用户可以通过多种方式与浏览器中的页面进行交互，而事件是交互的桥梁。 Web开发人员可以通过JavaScript内置的或者自定义的事件处理器来响应用户的动作。什么是事件广义上讲，Javascript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应（如鼠标移动、当前页面的载入关闭，键盘输入，拖拽页面图片，单击浮动菜单等）。事件处理器是指与特定的文
复制链接

扫一扫