常见的事件类型及初始化方式?丨技术开发分享录

"常见的事件类型及初始化方式?"

转载翻译原创

问答题 · 前端 · javascript · @{ formatTime(detail.create_time) }

常见的事件类型及初始化方式?

事件模块	传递给 createEvent的Event type	事件初始化方法
用户交互事件	UIEvents	event.initUIEvent(type, canBubble, cancelable, view, detail)
鼠标事件	MouseEvents	event.initMouseEvent(type, canBubble, cancelable, view, …)
html事件	HTMLEvents	event.initEvent(type, bubbles, cancelable)
自定义事件	CustomEvent	new CustomEvent(typeArg, customEventInit)
基础事件	Event	event.initEvent(type, bubbles, cancelable)

示例：

// 创建事件
var tapEvent = document.createEvent('Event');

// 定义事件名为'tap'.
tapEvent.initEvent('tap', true, true);

// 监听事件
var btnEle = document.querySelector('button');
btnEle.addEventListener('tap', function(e) {
  console.log(e);
}, false);

// 触发对象可以是任何元素或其他事件目标
btnEle.dispatchEvent(tapEvent);

自定义事件：

var touchEvent = new CustomEvent('touch', {
    detail: {
        desc: 'custom touch event.'
    }
});
window.addEventListener('touch', function(e) {
    console.log(e);
});
window.dispatchEvent(touchEvent);

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

PS：写作不易，如要转裁，请标明转载出处。