dtcms 源码 VR全景图片 Markdown Jenkins oracle templates arraylist arduino binding stl Momentjs vue实例 vuejs视频教程 bootstrap后台模版 js的点击事件 springboot单点登录 java反射方法 查看rabbitmq版本 mysql统计数量 js数组截取前5个 flutter ui构建工具 mysql时间戳转时间 python语言入门 python中len函数 python中文 python怎么下载安装 java中的基本数据类型 java如何连接mysql linux命令行 linux入门基础 系统集成项目管理工程师教程 sql行转列 msdev mathcad15 excel应用大全 语音分析软件 跑马灯动态壁纸 linux解压命令 数据结构与算法分析 android开发案例
当前位置: 首页 > 学习教程  > 

原生js自动触发事件

2020/10/16 18:03:57 文章标签: js原生点击事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch。该方法能模拟用户行为,如点击(click&…

熟悉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){}; }
};

 

 

 

转载于:https://www.cnblogs.com/mopagunda/p/4899341.html


本文链接: http://www.dtmao.cc/news_show_300364.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?