如果大家将一张网页看成一个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. Ubuntu 安装 Oracle11gR2：'install' of makefile '/home/oracle/app/oracle/product/11.2.0/dbhome_1/ctx/lib/ins_ctx.mk'

    网上包括官方,就是教给你如何安装依赖包什么的:libstdc++5,但很麻烦:既要下载找相关的包,还不一定能安装的上. 其实,仅仅是为了安装,直接从二进制的deb包里,解压一个 “libstdc++. ...

  2. ScSR超分辨率的效果

  3. 第四章 Spring.Net 如何管理您的类___IObjectPostProcessor接口

    官方取名叫 对象后处理器 (object post-processor) , 听起来很高级的样子啊!实际上就是所有实现了这个接口的类,增加了两个方法. Spring.Objects.Factory.C ...

  4. Unity和虚幻的比较

    很多人从Unity开始转向虚幻4了,我目前则相反,从研究使用虚幻4,回到了Unity 5上. 前端总结的Unity和Unreal 4的一些优缺点,自己做的对比图.就先放这里了. 其实,作为引擎,各有优 ...

  5. vs2008设置dll、lib库的输出路径

    vs2008中,有些项目上的功能是要生产库文件给其他项目调用的,以下是一些设置库文件(x.dll和x.lib)输出路径的方法. 设置x.dll 输出路径方法是在右键项目的"属性"- ...

  6. 《C++ Primer Plus》第13章 类继承 笔记

    类继承通过使用已有的类(基类)定义新的来(派生类),使得能够根据需要修改编程代码.共有继承建立is-a关系,这意味着派生类对象也应该是某种基类对象.作为is-a模型的一部分,派生类继承基类的数据称源和 ...

  7. Error setting expression 'XXX' with value 设置表达式“XXX”时出错 解决方法

    1.表达式“xxx”在所调用的action里没有与之对应的对象: 2.action里有该对象作为私有成员变量但是没有get&set方法.

  8. PHP实现IP–数字互相转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. poj_2739 尺取法

    题目大意 给定一个数字N,N可能由1个或多个连续的素数求和得到,比如41 = 2+3+5+7+11+13, 41 = 11+13+17, 41 = 41.求出对于N,所有可能的组合形式. 题目分析 先 ...

  10. JS-【同页面多次调用】tab选项卡封装

    这两天遇到一个页面,同一个页面中同一个特效会用好多次,比如tab,比如轮播等.我又不想很不负责任的复制一遍代码,那样页面臃肿,自己心里也堵得慌.于是就想着把代码封装起来多次调用. 对于封装,只在公开课 ...