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中的模拟事件和自定义事件实例分析-创新互联
网页链接:http://ybzwz.com/article/idgog.html