`

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 脚本 当鼠标按钮被松开时执行脚本
分享到:
评论

相关推荐

    ExtTag,获取HTML自定义属性

    在现代Web开发中,HTML元素已经不再局限于标准的属性,开发者可以自定义属性来扩展其功能,这在处理复杂交互和数据绑定时尤其有用。"ExtTag"可能是一个专门用于处理HTML自定义属性的工具或框架,它允许我们将HTML...

    HTML5属性,事件,标签

    本文将详细介绍HTML5中的属性、事件和标签,并探讨它们在实际开发中的应用。 首先,HTML5引入了许多新的属性,这些属性使得元素功能更加强大和灵活。例如,`autofocus`属性可以自动将焦点设置在特定输入元素上,`...

    XAML转HTML.zip

    "XAML转HTML"是一个将XAML用户界面转换为HTML页面的过程,通常是为了使基于XAML的应用程序能在非Windows平台或Web浏览器上运行。这个过程涉及到技术栈的融合,包括前端和后端的技术。 转换过程可能包括以下几个步骤...

    html5通过javascript预览图片以及获取图片属性

    JavaScript作为浏览器端的主要脚本语言,与HTML5结合,可以实现许多创新功能,如图片预览和获取图片属性。在本文中,我们将深入探讨如何使用HTML5和JavaScript来实现这些功能,并参考给出的`test.html`文件进行解析...

    html标签转C#源码

    本项目“html标签转C#源码”提供了一种将HTML标签转换为C#代码的方法,使得在WPF(Windows Presentation Foundation)和WinForm应用程序中能够方便地处理和呈现HTML内容。 首先,我们要理解这个项目的核心功能。...

    html5旋转音乐图标,控制背景音乐jquery.rotate

    总的来说,这个项目结合了HTML5的音频元素、jQuery的事件处理和动画效果,以及CSS3的转型动画,实现了一个具有视觉反馈的背景音乐控制器。这样的设计提高了用户体验,使H5应用更具吸引力。在实际开发中,我们还可以...

    旋转的摩天轮 html源码

    比如,可以使用`transform`属性来实现旋转效果,`transition`属性添加平滑的动画过渡,`position`属性设置元素的定位方式,使摩天轮的各个部分能够相对正确地移动。此外,CSS还可以用来实现响应式设计,确保摩天轮在...

    Html5+CSS3实现3D旋转效果

    结合HTML5的`&lt;button&gt;`或其他交互元素,我们可以让用户触发3D旋转,或者通过JavaScript监听事件来响应用户的操作。例如,当用户点击按钮时,可以增加或减少旋转角度,或者改变旋转轴。 在`CityDemo`这个示例中,...

    小程序中将html内容转化成wxml可以显示的内容,方便用于小程序中显示

    5. 事件处理:将HTML中的事件处理函数转换为WXML的事件绑定方式,如`onclick`变为`bindtap`。 三、工具与库 1. `html-to-wxml`库:这个压缩包中的`html-to-wxml-master`可能是一个转换工具或库,用于自动化HTML到...

    HTML5的3D翻转轮播幻灯片特效代码

    实现这样的3D翻转轮播特效,开发者通常会编写一个JavaScript库或插件,包含初始化、事件处理、动画控制等功能模块。在实际应用中,开发者需要考虑浏览器兼容性,因为并非所有浏览器都支持HTML5和CSS3的新特性。为了...

    HTML5 3D魔方旋转拼图小游戏代码

    4. **事件处理**: 由于游戏支持键盘和鼠标操作,所以它必然涉及到JavaScript的事件监听和处理。例如,可能有事件监听键盘上的上下左右箭头键,以及鼠标的移动和点击事件,以控制魔方的旋转。 5. **JavaScript框架或...

    JS+Html图片放大缩小旋转拖动效果

    首先,记录下鼠标或手指接触图片时的位置,然后在移动事件中,根据鼠标或手指的新位置更新图片的`left`和`top`属性,使其跟随移动。 6. **实现细节**:为了实现以上功能,需要在HTML中为图片添加ID或类名以便于...

    HTML5 CSS3音量调节旋转按钮.zip

    例如,jQuery的`.on()`方法可以用于绑定事件,`.css()`方法可以方便地修改元素的CSS样式,包括`transform`属性。 总的来说,"HTML5 CSS3音量调节旋转按钮"项目结合了HTML5的结构化标签、CSS3的动态样式和JavaScript...

    用html+CSS实现的3D旋转相册(表白代码)

    实际项目中,还需要添加JavaScript来处理按钮点击事件,动态改变图片的3D旋转角度,实现平滑的3D旋转效果。 对于表白相册,你可以根据个人喜好替换压缩包中的照片,只需确保新照片的文件名与原文件名一致,以保持...

    3D旋转HTML

    在IT行业中,3D旋转是增强用户界面交互...在这个项目中,HTML可能会包含一些特定的元素,如`&lt;div&gt;`,用于创建3D对象的容器,以及可能的事件监听器,如`ondragstart`和`ondrag`,以响应用户的拖动操作。例如: ```html ...

    Winform C# Flash控件 属性 方法 事件.doc

    在本文中,我们将深入探讨如何在Windows Forms(Winform)应用程序中使用C#语言集成Flash控件,并了解其核心属性、方法以及事件。Flash控件是通过ShockwaveFlashObjects库来实现的,它允许开发者在桌面应用中嵌入并...

    html转pdf(亲测可用)

    4. 考虑兼容性:由于`html2canvas`和`jspdf`对某些CSS属性的支持有限,可能需要在转换前对HTML样式做一些调整。同时,对于IE浏览器,可能需要额外的polyfill或替代方案,如`canvg`,来处理Canvas的不兼容问题。 5. ...

    HTML5响应式3D翻转动画效果.zip

    3. **JavaScript交互**:通过jQuery,我们可以监听用户的交互事件,比如`.hover()`或`.click()`,当这些事件触发时,改变元素的`class`或直接修改CSS的`transform`属性,启动翻转动画。 4. **媒体查询**:为了实现...

    css3 transform旋转属性鼠标悬停3D立体图片旋转显示

    在现代网页设计中,CSS3(层叠样式表第三版)提供了一系列强大的功能,其中之一就是`transform`属性。本教程将深入探讨`transform`中的旋转属性,以及如何利用这一特性实现鼠标悬停时3D立体图片的动态旋转展示效果。...

Global site tag (gtag.js) - Google Analytics