如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的，如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢？
为大家介绍js下的几个方法：

1. createEvent（eventType）
参数：eventType 共5种类型：
    Events ：包括所有的事件. 
          HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 
                                    'submit', 'unload'. 事件
          UIEvents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
                                  间接包含 MouseEvents. 
          MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'. 
          MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 
                                      'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 
                                      'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

2. 在createEvent后必须初始化，为大家介绍5种对应的初始化方法
  HTMLEvents 和 通用 Events：
            initEvent( 'type', bubbles, cancelable )
    UIEvents ：
                      initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
    MouseEvents： 
                      initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, 
                      clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
    MutationEvents ：
                      initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue, 
                      attrName, attrChange )

3. 在初始化完成后就可以随时触发需要的事件了，为大家介绍targetObj.dispatchEvent(event)
    使targetObj对象的event事件触发
  需要注意的是在IE 5.5+版本上请用fireEvent方法，还是浏览兼容的考虑

4. 例子
    //例子1  立即触发鼠标被按下事件
    var fireOnThis = document.getElementByIdx_x('someID');
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        fireOnThis.dispatchEvent(evObj);

//例子2  考虑兼容性的一个鼠标移动事件
    var fireOnThis = document.getElementByIdx_x('someID');
    if( document.createEvent ) 
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initEvent( 'mousemove', true, false );
        fireOnThis.dispatchEvent(evObj);
    }
  else if( document.createEventObject )
  {
      fireOnThis.fireEvent('onmousemove');
  }

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

</head>

<body>

    <div id="a" onclick="alert(1);">321321</div>

    <script type="text/javascript">

        /**

         * 1. createEvent(eventType)

         * 参数： eventType 共5种类型

         * Events : 包含所有的事件

         *         HTMLEvetns : 'abort','blur','change','error','focus',

         *                     'load','reset','resize','scroll','select',

         *                     'submit','unload'

         *         UIEvents : 'DOMActivate','DOMFocusIn','DOMFocusOut','keydown','keypress','keyup'

         *         MouseEvents : 'click','mousedown','mousemove','mouseout','mouseover','mouseup'

         *         MutationEvents : 'DOMAttrModified','DOMNodeInserted','DOMNodeRemoved','DOMCharacterDataModified',

         *                         'DOMNodeInsertedIntoDocument','DOMNodeRemovedFromDocument','DOMSubtreeModified'

         */

        /**

         * 2. 在 createEvent 后必须初始化，为大家介绍5种对应的初始化方法

         * HTMLEvents 和 通用 Events

         *         initEvent('type',bubbles,cancelable)

         * UIEvents

         *         initUIEvent('type',bubbles,cancelable,windowObject,detail)

         * MouseEvents

         *         initMouseEvent('type',bubbles,cancelable,windowObject,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget)

         * MutationEvents

         *         initMutationEvent('type',bubbles,cancelable,relatedNode,prevValue,newValue,attrName,attrChange)

         */

        /**

         * 在初始化完成后就可以随时触发需要的事件了，为大家介绍 targetObj.dispatchEvent(event)

         * 使targetObj对象的event事件触发

         * 需要注意的是在IE5.5+版本上请用fireEvent方法，还是浏览器兼容的考虑

         */

        // 立即触发鼠标按下事件

        var fireOnThis = document.getElementById('a');

        var evObj = document.createEvent('MouseEvents');

        evObj.initMouseEvent('click',true,true,window,1,12,345,7,220,false,false,true,false,0,null);

        fireOnThis.dispatchEvent(evObj);

    </script>

</body>

</html>

JS中手动触发事件的方法的更多相关文章

  1. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

  2. PowerBuilder中DW如何手动触发事件

    调用setitem默认不会触发itemchanged事件 如果想实现可手动触发itemchanged事件 事件格式如下: dw_list.event itemchanged( /*long row*/ ...

  3. JS中的计时器事件

    JS可以实现很多java代码不易完成的功能.这里学习一些js中的计时器事件. JavaScript 一个设定的时间间隔之后来执行代码,称之为计时事件. 主要通过两个方法来实现: 1.setInterv ...

  4. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  5. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  6. 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...

  7. JavaScript -- 时光流逝（五）：js中的 Date 对象的方法

    JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...

  8. JavaScript -- 时光流逝（三）：js中的 String 对象的方法

    JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

  9. 在JS中调用CS里的方法(PageMethods)

    在JS中调用CS里的方法(PageMethods) 2014年04月28日 11:18:18 被动 阅读数:2998   最近一直在看别人写好的一个项目的源代码,感觉好多东西都是之前没有接触过的.今天 ...

随机推荐

  1. TFS2010 分支问题

    最近在使用TFS2010分支的时候,对项目怎么分支都无法分支. 原因:TFS只支持对文件夹分支不针对项目分支 解决:项目建一个文件夹 把项目移动进去,再进行分支即可. 提示:Nuget会出现意外的路径 ...

  2. 一、NHibernate配置所支持的属性

    属性名 用途 dialect 设置NHibernate的Dialect类名 - 允许NHibernate针对特定的关系数据库生成优化的SQL 可用值: full.classname.of.Dialec ...

  3. swift--动画效果

    一.for循环创建4*4个view,然后对立面的所有view进行动画,这里列集中动画的效果: 1,旋转动画 for tile in backgrounds{ //现将数字块大小职位原始尺寸的1/10 ...

  4. 【渗透测试学习平台】 web for pentester -8.XML

    example1: http://192.168.91.139/xml/example1.php?xml=%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%2 ...

  5. MFC-TCP连接代码片段（支援大富的）

    BOOL CClientSocketTestDlg::OnInitDialog() { CDialogEx::OnInitDialog(); ........................ // T ...

  6. 格式化输出%s和%S的区别

    使用s时,printf是针对单字节字符的字符串,而wprintf是针对宽字符的 使用S时,正好相反,printf针对宽字符 CString中的format与printf类似,在unicode字符集的工 ...

  7. PyQt4发射信号

    继承自QtCore.QObject的对象均可以发射信号.如果我们单击一个按钮,那么一个clicked()信号就会被触发.下面的示例演示如何手动发射一个信号. #!/usr/bin/python # - ...

  8. String.Join重载String.Join 方法 (String, String[], Int32, Int32)

    https://msdn.microsoft.com/zh-cn/library/tk0xe5h0 String.Join 方法 (String, String[], Int32, Int32) 官方 ...

  9. poj_1161 并查集

    题目大意 一个学校里面有n个学生(标号从0到n-1)和m个社团(标号从0到m-1),每个学生属于0个或多个社团.近期有SARS传播,属于同一个社团的学生的SARS可以相互传染.给出m个社团中的学生标号 ...

  10. MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传

    1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...