`

HTML 事件属性[转]

    博客分类:
  • html
阅读更多

转:http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

 

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用,并用引号引起来。当事件发生时,浏览器会执行这些代码。例如,当您把鼠标移动到一个超链接时,会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作:

<a href="/index.html" onmouseover="alert('Welcome');return false"></a>

如需学习更多有关事件编程方面的知识,请访问 W3School 提供的 JavaScript 教程DHTML 教程

下面的表格提供了标准的事件属性,可以把它们插入 HTML/XHTML 元素中,以定义事件行为。

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

属性 值 描述
onload 脚本 当文档被载入时执行脚本
onunload 脚本 当文档被卸下时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

属性 值 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素:

属性 值 描述
onabort 脚本 当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 值 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 值 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本
分享到:
评论

相关推荐

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 html2canvas.js可以将当页面渲染成一个Canvas图片,通过读取...

    HTML图片3D旋转源码.rar

    源码使用HTML、CSS3、原生js方法结合实现了图片360度立体旋转效果,源码分别展示了六种情况下不同角度的多张图片立体旋转,具体运行效果可参见视频演示,实现技术:引用了大量的css3属性和原生js函数如动态获取页面...

    HTML开发王

    4.4.8 设置网页转场效果 4.4.9 设置网页分级 4.5 元数据纲要和元数据架构 4.5.1 使用元数据纲要(profile属性) 4.5.2 使用元数据架构(scheme属性) 4.6 巩固与自测 第5章 文字与段落 5.1 结构化的文本 5.1.1 用于强调...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    使用 document 对象可以对 HTML 文档进行检查、修改或添加内容,并处理该文档内部的事件。在 Web 页面上,document 对象可通过 window 对象的 document 属性引用,或者直接引用。 document 对象在主文档的任意时间...

    eloquent-computed-attributes:当输入更改时,自动计算Laravel Eloquent模型上的属性

    它通过侦听模型的saving事件并检查计算属性的依赖项是否脏来工作。 如果是这样,将重新计算该属性,并在数据库中更新其新值。 通过“ compute”方法的签名来声明计算属性的依赖关系。 该方法中的参数名称对应于...

    基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴移动...

    JavaScript详解(第2版)

     15.9.5 回顾事件属性   15.10 不唐突的JavaScript   15.11 应知应会   练习   第16章 cookie   16.1 什么是cookie   16.1.1 cookie的组成   16.1.2 cookie的属性   16.2 使用JavaScript...

    js获取事件源及触发该事件的对象

    某Html元素有onclick方法:onclick=’... //这时obj就是触发事件的对象,可以使用它的各个属性 //还可以将obj转换成jquery对象,方便选用其他元素 var $obj = $(obj); alert&#40;$obj.parent(&#41;.attr(“href”));

    JavaScript中文参考手册

    要获得关于这些主题的详细信息,请参看 Netscape Communicator 中的动态 HTML。 目录 此参考中包含的内容 此参考是依照 JavaScript 语言的功能组织的。有时你已经知道了某个对象或方法的名称,但是不太清楚要在...

    javascript完全学习手册2 源码

    4.2.3 表单元素属性和事件 4.2.4 表单验证 4.3 Anchor与Link对象 4.3.1 Anchor对象 4.3.2 Link对象 4.4 Image对象 4.4.1 图像翻转 4.4.2 图像载入 第5章 JavaScnpt其他常用窗口对象 5.1 Window对象 ...

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    3.2.2 颜色合成之globalcompositeoperation属性 / 67 3.2.3 颜色反转 / 69 3.2.4 灰度控制 / 70 3.2.5 阴影效果 / 71 3.3 自定义画板 / 72 3.3.1 画板的建立 / 72 3.3.2 canvas画布的导出功能 / 79 3.4 小结...

    jquery-easyui-1.3.6.zip

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。...spinner:添加"readonly"属性、"readonly"方法和"onChange事件。

    HTML5 Canvas核心技术 图形、动画与游戏开发

    9 1.4 开始学习html5 10 1.4.1 规范 10 1.4.2 浏览器 11 1.4.3 控制台与调试器 11 1.4.4 性能 13 1.5 基本的绘制操作 15 1.6 事件处理 18 1.6.1 鼠标事件 18 1.6.2 键盘事件 22 .1.6.3 触摸事件 23 1.7 ...

    JavaScript王者归来part.1 总数2

     13.5.1 事件处理模式--一个实现简单事件处理模式的例子   13.5.2 用户事件接口的定义   13.5.3 事件代理和事件注册--一个实现标准事件接口的例子   13.5.4 标准模式--事件分派和接收   13.6 一个例子--...

    02 函数与事件.ppt

    目的: 掌握什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 网页中嵌入脚本有两种方式:使用标签或外部 *....Array对象常用的属性是length,排序方法:sort 循环结构:for 循环、while循环、do-while循环

    css3 transform及原生js实现鼠标拖动3D立方体旋转

    本文通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴...

Global site tag (gtag.js) - Google Analytics