首页 web前端 html教程 HTML里的事件怎么使用

HTML里的事件怎么使用

Dec 04, 2017 am 09:13 AM
html 事件 使用

事件是经常由客户的操作或者是通过浏览器的功能来触发的,使用JS在任意时刻也可以触发特定的事件。这次就来给大家说一下HTML里常用的事件思路

DOM中的事件模拟

在document对象上使用creatEvent()方法创建event对象。参数是要创建的事件类型的字符串

DOM2:字符串都使用英文复数形式 DOM3:单数 UIEvents:UI事件(鼠标事件和键盘事件都继承自UI事件) MouseEvents:鼠标事件 MutationEvents:DOM变动事件 HTMLEvents:HTML事件 使用与事件有关的信息对其初始化 触发事件。使用dispatchEvent()方法,参数为触发事件的event对象。所有支持事件的DOM节点都支持这个方法

模拟鼠标事件

创建对象后返回的对象有一个initMouseEvent()方法,用于指定与该鼠标事件有关的信息。这个方法接收15个参数,分别与鼠标事件中每个典型的属性一一对应。

var event=document.createEvent("MouseEvents");
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
btn.dispatchEvent(event);
登录后复制

模拟键盘事件

创建对象后返回的对象有一个initKeyEvent()方法。 DOM3规定,调用createEvent(“keyboardEvent”)就可以创建一个键盘事件。 在firefox中,调用createEvent(“keyEvents”)

在其他浏览器中,则需要创建一个通用的事件,然后再向事件对象中添加键盘事件特有的信息。

var event=document.createEvent("Events");
event.initEvent(type,bubbles,cancelable);
event.view=document.defaultView;
...
textbox.dispatchEvent(event);
登录后复制

自定义DOM事件

自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件。 创建新的自定义事件,可以调用createEvent(“CustomEvent”) 返回的对象有一个initCustomEvent()方法。

ie中的时间模拟

思路:先创建event对象,然后为其指相应的信息,然后触发 创建:document.createEventObject(),不接收参数,结果会返回一个通用的event对象。 手工添加所有信息。 在目标上调用fireEvent()方法。参数:事件处理程序名称和event对象,会自动为event对象添加srcElement和type属性

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML5标签嵌套规则的详细介绍

HTML里FormData对象的详细介绍

H5里的postMessage API图文详解 详细介绍

以上是HTML里的事件怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1662
14
CakePHP 教程
1418
52
Laravel 教程
1311
25
PHP教程
1261
29
C# 教程
1234
24
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles