JavaScript中的模拟事件和自定义事件实例分析-创新互联

本文实例讲述了JavaScript中的模拟事件和自定义事件。分享给大家供大家参考，具体如下：

成都网络公司-成都网站建设公司成都创新互联10多年经验成就非凡，专业从事成都网站建设、成都网站设计，成都网页设计，成都网页制作，软文平台，一元广告等。10多年来已成功提供全面的成都网站建设方案，打造行业特色的成都网站建设案例，建站热线：18982081108，我们期待您的来电！

前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event。

下面介绍JavaScript中的模拟事件和自定义事件。

1、DOM中的事件模拟

1) DOM中的事件模拟有以下3个步骤：

步骤1：创建事件对象event

可以在document对象上使用createEvent()方法创建event对象，此方法接收一个参数，即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式，而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一：

① UIEvents：一般化的UI事件，鼠标事件和键盘事件都继承自UI事件，DOM3级中是UIEvent；

② MouseEvents：一般化的鼠标事件，DOM3级中是MouseEvent；

③ MutationEvents：一般化的DOM变动事件，DOM3级中是MutationEvent；

④ HTMLEvents：一般化的HTML事件，没有对应的DOM3级事件，被分散到 其他类别中。

步骤2：初始化事件对象

使用与事件有关的信息对其进行初始化，每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象，不同类型的方法的名字也不相同，具体要取决于createEvent()中使用的参数。

步骤3：触发事件

使用dispatch()方法，此方法接收一个参数，即要触发事件的event对象。

2) 模拟鼠标事件：

使用createEvent()方法创建event对象，传入字符串"MouseEvents"，返回的对象有一个名为initMouseEvent()方法，用于指定与该鼠标事件有关的信息。

模拟按钮的单击事件：

var btn = document.getElementsByTagNames("button")[0];
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
btn.dispatchEvent(event);

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页标题：JavaScript中的模拟事件和自定义事件实例分析-创新互联
网站URL：http://cxhlcq.com/article/idgog.html