熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢?

js中添加一个主动触发事件的方法有dispatch。该方法能模拟用户行为,如点击(click)操作等。 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法。

dispatchEvent() 方法给节点分派一个合成事件。

语法如下:

dispatchEvent(eventObj)
eventObj 参数是一个描述事件的 ActionScript 对象
在调用 dispatchEvent() 方法之前,必须在代码中对其进行声明,此外,还必须创建一个事件对象以传递给 dispatchEvent()。该事件对象包含侦听器可用来处理该事件的有关信息。

使用时具体流程如下:

creatEvent-------initEvent--------dispatchEvent

具体如下

1. createEvent(eventType),该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。

参数:eventType 共5种类型:
    Events :包括所有的事件.
          HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select',
                                    'submit', 'unload'. 事件
          UIEevents :包括 '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方法,还是浏览兼容的考虑。

类似封装方法如下:

var rect={
dispatch : function(el ,type){ try{ if(el.dispatchEvent){ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt); }else if(el.fireEvent){ el.fireEvent('on'+type); } }catch(e){}; }
};

原生js自动触发事件的更多相关文章

  1. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  2. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  3. jQuery 自动触发事件的坑

    有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮.Jquery中可以使用trigger()方法模拟事件. $(selector).trigger(event,[param1,param2,. ...

  4. JQuery 自动触发事件

    JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...

  5. Gwt ListBox选中自动触发事件

    以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...

  6. jQuery自动触发事件

    转自:https://blog.csdn.net/CY_LH/article/details/78982218 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发c ...

  7. js获取触发事件的元素

    //获取事件 var e = window.event; //获取元素 obj = e.target || e.srcElement; console.log(e); checkRepeat(e.ta ...

  8. js代码触发事件

    /*** * 需要触发谁的点击事件 * @param how_id 节点的id 如:<input id='test'/> 则how_id=test * @param how_this 这个 ...

  9. 原生JS跨浏览器事件封装处理

    引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法 一.a ...

随机推荐

  1. 修改了/etc/fstab之后出现登录密码输入之后又返回登录界面的问题

    最后那一个挂载到/home下面的盘是我新增加的,如果注释掉就一切正常,如果取消注释,就会发生标题说的问题. 后来我意思都这样直接挂载,导致/home下面原本的东西不在了,注释掉之后再来看,发现下面确实 ...

  2. android 入门-ID

    @+id/btn             //表示在R.java文件里面新增一个id为btn的控件索引,最常用的一种声明控件id的方式. @+android:id/list  //+android:表 ...

  3. WPF 多语言实现

    很多国际化的程序都提供了多语言的选项,这样方便不同国家的使用者更方便的使用软件.这篇博客中将介绍在WPF中实现多语言的方式. 方式一,使用WPF动态资源的方式实现.先简单介绍下StaticResour ...

  4. Build Instructions (Windows) – The Chromium Projects

    转自:http://121.199.54.6/wordpress/?p=1156 原始地址:http://www.chromium.org/developers/how-tos/build-instr ...

  5. 如果我可以重新学习iOS开发(转)

    在过去的几个月里,我一直在学习用Objective-C编写iOS app,最后我开始理清思绪.这比我想象中要难很多,也花了太长时间. 我经常遇到困难.感到沮丧,修复bug比实际写代码要花太多时间.但是 ...

  6. 词法分析 after Coding

    学习词法分析,认为词法分析很难. 虽然不懂,但是要完成作业. 去图书馆或者看书借鉴代码,修改错误,让代码正常运行. 学习词法分析后,了解到自己有很多的不足: 1.代码不是很熟练,课本知识不了解.知识面 ...

  7. WebApi多数据库切换

    用抽象工厂来解决多数据库之间的切换问题是普遍的,像以下几篇文章都讲的很具体 申明之前写的存在强大漏洞 -- 之前有涉及到IoC Autofac的知识点,鄙人孤陋寡闻,在亲身实践后才发现其中奥妙可参照一 ...

  8. Android打包的那些事

    使用gradle打包apk已经成为当前主流趋势,我也在这个过程中经历了各种需求,并不断结合gradle新的支持,一一改进.在此,把这些相关的东西记录,做一总结. 1. 替换AndroidManifes ...

  9. Js判断客户端是iphone还是安卓

    <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...

  10. 自定义鼠标光标,制作cur,设置热点,中心点。

    ..没哈好说的,,只是推荐一个软件 ArtCursor..非常好用. 关于另外一个更改光标的重要问题:鼠标的hotspot,也就是鼠标的作用点问题,本人关于这个问题纠结了很久,始终无法找到更改HCUR ...