如果大家将一张网页看成一个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. C#实现大数相加

    在C#中,我们经常需要表示整数.但是,c#的基本数据类型中,最大的long也只能表示-9,223,372,036,854,775,808 到 9,223,372,036,854,775,807之间的数 ...

  2. can not connect to MySQL server on "10.30.48.153"(13)

    国庆节前好好的程序,完了回来愣是不能跑了! 真是纳闷了,而且邮件别人都发出去了,等于这跟别人一边使用一遍救火一样子了.     查了一下午,一直以为是机器mysql服务的问题,或者是我代码的问题.该找 ...

  3. ubuntu下使用sublime text进行C编程开发尝鲜

    1 选择编译系统 2 编写文件,编译(Ctrl+B)运行(Shift+Ctrl+B)

  4. 【java】 java 中stop方法终止线程的不良后果

    stop()方法属于暴力终止线程的方法,有诸多隐患已经被废弃了. 下面演示的是stop方法会释放锁,造成数据不一致的问题. package com.xwolf.java.thread; /** * C ...

  5. POJ 1321 棋盘问题(状态压缩DP)

    不总结的话, 同一个地方会 WA 到死 思路: 状态压缩 DP. 1. s 表示压缩状态, 若第 i 列放了棋子, 那么该列置 1, 否则该列置 0. 假如 s = 3(0x011) 那么表示棋盘的第 ...

  6. js常用总结

    常用总结,方便大家学习共享.   1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html-& ...

  7. Android中Bitmap和Drawable详解

    一.相关概念 1.Drawable就是一个可画的对象,其可能是一张位图(BitmapDrawable),也可能是一个图形(ShapeDrawable),还有可能是一个图层(LayerDrawable) ...

  8. Win7下使用Putty代替超级终端通过COM串口连接开发板方法

    1.如果电脑(笔记本)没有串口接口,则需要使用一个 USB-Serial 转换线,这里使用 prolific usb-serial USB--串口转换线,首先需要在win7上安装对应的 USB--串口 ...

  9. Win8/8.1下驱动安装“数据无效”错误的有效解决方法

    Windows8.1 安装完vmware 后并没有安装 vmnet1,vmnet8 这两个虚拟网卡,纠结了半天,原来是两个服务没打开. 如果你使用的是Windows8或者8.1,并且精简过系统,那么在 ...

  10. Discuz 模板标签说明

    Discuz 模板标签说明 Discuz! 的模板采用近似 PHP 表达式的语法,基本都是可识别的HTML,但涉及到变量和动态内容时,基本形式下: <!-{ 代码内容 }-> 逻辑元素包围 ...