如果大家将一张网页看成一个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. ScrollView：ScrollView can host only one direct child异常

    java.lang.IllegalStateException: ScrollView can host only one direct child 原因是在外面有一个TextView控件,将其删除则 ...

  2. angularjs基础——控制器

    1)当使用非空ng-app和ng-controller时,变量由angularjs控制器来处理 2)控制器接管模型变量后,直接修改模型,模版里的变量还是会自动变的 <!DOCTYPE html& ...

  3. 钟意Action

    package com.j1.mai.action; import com.github.pagehelper.PageInfo; import com.j1.app.mysql.model.Appr ...

  4. iOS事件拦截(实现触摸任意位置隐藏指定view)

    项目里有一个需求,类似新浪或者腾讯微博的顶部title栏的类别选择器的消失(在选择器展开的时候,触摸屏幕任何地方使其消失). 最开始的想法是当这个选择器(selectorView)展开的时候,在当前屏 ...

  5. JDK1.8在LINUX下安装步骤

    JDK1.8在LINUX下安装步骤: 在/usr/lib/目录下新建jvm文件夹,如果已有jvm文件夹,则将之前的JDK版本删除,即在jvm目录下执行命令:rm –rf * 将JDK文件jdk-8u4 ...

  6. eclispe创建gradle项目

    1.打开eclipse,选择Help——>install from Catalog,安装如图所示的gradle 2.右击空白处,new——>other——>Gradle——>G ...

  7. LeetCode——Product of Array Except Self

    Description: Given an array of n integers where n > 1, nums, return an array output such that out ...

  8. PHP中new static()与new self()的区别异同

    self - 就是这个类,是代码段里面的这个类. static - PHP 5.3加进来的只得是当前这个类,有点像$this的意思,从堆内存中提取出来,访问的是当前实例化的那个类,那么 static ...

  9. 【Mac】Docker安装及基础使用

    Docker 安装 在 Mac OS X 系统中,首先你要下载安装包安装:Docker Toolbox 安装过程中,可以选择是否安装 Docker Machine,Docker Compose 等,默 ...

  10. WCF(四) 深入契约

    服务契约中的请求-响应操作 1.请求-响应模式 [OperationContract]//1默认就是 请求-相应 Requst- Replay DateTime GetDateTime(); [Ope ...