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

在有些情况下,我们需要程序逻辑自动触发元素的事件,例如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表白!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于event事件触发控制是一种常见的编程方法,它允许我们在特定的事件发生时执行代码或触发一些动作。在这种控制下,我们可以定义需要监听的事件,并通过设置相应的回调函数来处理这些事件事件可以是用户的操作,比如点击按钮、键盘输入等;也可以是系统的反应,比如网络请求完成、定时器触发等。在程序中,我们通过注册事件处理函数来捕获这些事件,并在事件发生时执行相应的逻辑或操作。 基于event事件触发控制的编程方式具有以下几个优点: 1. 高效灵活:通过监听事件并异步执行响应函数,可以充分利用计算资源,并提高程序的响应速度和并发能力。 2. 模块化设计:事件触发控制可以帮助我们将程序分解为更小的模块,每个模块专注于处理特定的事件,提高代码的可维护性和可扩展性。 3. 松耦合:通过事件触发控制,事件产生的模块和事件处理的模块可以解耦,降低了模块之间的依赖性,提高了代码的可测试性和重用性。 在具体实现中,我们可以使用各种编程语言或框架提供的事件机制来实现event事件触发控制。比如在JavaScript中,可以使用addEventListener函数来监听DOM事件;在Node.js中,可以使用EventEmitter对象来实现自定义事件触发和处理。同时,许多GUI编程工具和框架也提供了强大的事件触发控制功能,用于实现用户界面的交互和响应。 总之,基于event事件触发控制是一种强大的编程方法,能够帮助我们设计和实现灵活、高效的程序。通过合理地使用事件和回调函数,我们可以充分利用事件的特性,提升程序的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值