js自动触发事件&&自定义事件

在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click()form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟!


一、eventType

eventType共有5种类型:

  • HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'.

  • UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.

  • MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.

  • MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved','DOMCharacterDataModified','DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

上述加粗的是经常会用到的事件类型


二、createEvent(eventType)

eventType=MouseEvents,触发事件为click为例:

document.body.onclick=function(){
    alert("hello")
}
var event = document.createEvent('MouseEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("click", false, true);
//触发document上绑定的click事件
document.body.dispatchEvent(event);

通过el.dispatchEvent触发事件,聪明的你有没有想到vue里的$emit?

三、自定义事件

document.body.addEventListener("veb",function(e){
         alert(e.eventType)
})
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("veb", false, true);
//通过eventType传递事件信息
event.eventType="I love Veblen"
//触发document上绑定的click事件
document.body.dispatchEvent(event);

如果没什么意外,上面代码执行,你会向Veblen表白!

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,399评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,011评论 0 6
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,090评论 0 8
  • 跟风着批判的人,日日夜夜关注着别人的人,监视着等待着,终于你们有料了,又有话题了....... 出轨事件频频...
    珊海阅读 106评论 0 0
  • 一.近期的目标:完美的伴侣 二.需要重下的种子:爱与陪伴,智慧 三.具体的播种行为 1.早上一起床,从支付宝为爸爸...
    柔光宝宝阅读 85评论 0 0