js 中 document.createEvent的用法

 更新时间:2010年08月29日 23:22:02   作者:  
用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
<a class="comment-mod" onclick="alert('ss')" href="#">评论</a>
如果用户直接查看文章列表,那么所有的评论以及评论框都是不显示的,但是如果用户通过别的页面比如首页的个人动态直接定位到这篇日志,那么评论就应该全部显示。而列表页和查看单个条目的页面是同一个页面,这就要求我判断一下用户是否定位到该篇日志,如果是,就通过JS来触发 A 标签的点击事件。
一开始我尝试了一些方法,想当然地以为 A 标签和按钮一样是有 onclick() 事件的,结果发现没有,后来从网上搜了一些资料之后,成功解决了这个问题^_^ 。解决办法是针对 IE 和 FF编写不同的逻辑,部分代码如下:
复制代码 代码如下:

<script>
var comment = document.getElementsByTagName('a')[0];
if (document.all) {
// For IE
comment.click();
} else if (document.createEvent) {
//FOR DOM2
var ev = document.createEvent('HTMLEvents');
ev.initEvent('click', false, true);
comment.dispatchEvent(ev);
}
</script>


语法:
createEvent(eventType)
参数
描述
eventType
想获取的 Event 对象的事件模块名。
关于有效的事件类型列表,请参阅"说明"部分。

返回值
返回新创建的 Event 对象,具有指定的类型。
抛出
如果实现支持需要的事件类型,该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。
说明
该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。
下表列出了 eventType 的合法值和每个值创建的事件接口:
参数
事件接口
初始化方法
HTMLEvents
HTMLEvent
iniEvent()
MouseEvents
MouseEvent
iniMouseEvent()
UIEvents
UIEvent
iniUIEvent()

用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
该方法实际上不是由 Document 接口定义的,而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块,那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。

相关文章

  • 详解Javascript事件驱动编程

    详解Javascript事件驱动编程

    这篇文章主要为大家详细介绍了Javascript事件驱动编程的相关资料,通过经典案例向大家介绍Javascript事件驱动编程,需要的朋友可以参考下
    2016-01-01
  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    这篇文章主要介绍了JS表单验证插件之数据与逻辑分离操作,结合实例形式分析了JavaScript基于策略模式实现数据与逻辑分离的表单验证插件相关原理、操作技巧及注意事项,需要的朋友可以参考下
    2020-05-05
  • js中.sort()函数的常见用法与高级操作

    js中.sort()函数的常见用法与高级操作

    JavaScript中的sort函数可以用来对数组进行排序,默认情况下sort函数将数组中的元素转换为字符串,并按照Unicode码点的顺序进行排序,下面这篇文章主要给大家介绍了关于js中.sort()函数的常见用法与高级操作的相关资料,需要的朋友可以参考下
    2023-05-05
  • JS中不应该使用箭头函数的四种情况详解

    JS中不应该使用箭头函数的四种情况详解

    箭头函数给我们的工作带来了极大的方便,但是它们有什么缺点呢?我们应该一直使用箭头函数吗?我们应该在哪些场景中停止使用箭头函数?本文就来为大家详细讲讲
    2022-07-07
  • JavaScript 开发工具webstrom使用指南

    JavaScript 开发工具webstrom使用指南

    本文给大家推荐了一款非常热门的javascript开发工具webstrom,着重介绍了webstrom的特色功能、设置技巧、使用心得以及快捷键汇总,非常的全面。
    2014-12-12
  • JS代码放在head和body中的区别分析

    JS代码放在head和body中的区别分析

    放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取
    2011-12-12
  • JavaScript判断浏览器运行环境的详细方法

    JavaScript判断浏览器运行环境的详细方法

    这篇文章主要给大家介绍了关于JavaScript判断浏览器运行环境的详细方法,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JavaScript中layim之整合右键菜单的示例代码

    JavaScript中layim之整合右键菜单的示例代码

    这篇文章主要介绍了JavaScript中layim之整合右键菜单的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • Bootstrap框架安装使用详解

    Bootstrap框架安装使用详解

    这篇文章主要为大家详细介绍了Bootstrap框架的安装使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS实现表格隔行变色

    JS实现表格隔行变色

    这篇文章主要为大家详细介绍了JS实现表格隔行变色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论