香草JS中的触发CustomEvent
我试图在中创建自定义事件，但并不真正理解如何触发它。据我所知，有jQuery方法trigger('customEvent')，但是它是如何用Vanilla JS制造的？找不到这方面的任何信息。
创建CustomEvent
var addColor = function (elem) {
elem.classList.add('red');
var event = new CustomEvent('madeRed');
elem.dispatchEvent(event);
};将addEventListener附加到元素
var elem = document.querySelector('div');
addColor(elem);
elem.addEventListener('madeRed', function (elem) {
elem.classList.add('color-do-changed');
}, false);回答 1
Stack Overflow用户
发布于 2018-05-17 04:33:32
您的代码运行良好，您只是在调用它之后才决定侦听该事件。另外，如果您想传递自定义数据，那么通过详细信息传递它。您没有传递任何内容，而是希望事件参数是您的元素。
var elem = document.querySelector('div');
var addColor = function (elem) {
elem.classList.add('red');
var event = new CustomEvent('madeRed', {
detail: {
elem
}
});
elem.dispatchEvent(event);
};
elem.addEventListener('madeRed', function (event) {
event.detail.elem.classList.add('color-do-changed');
}, false);
addColor(elem);.red { color: red }
.color-do-changed { text-decoration: underline }<div>Make me red</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50391445
复制相关文章
![[javascript] 看知乎学习js事件触发过程](https://ask.qcloudimg.com/http-save/yehe-2504969/cs142qe8on.jpeg)
相似问题
在Dart中收听JS CustomEvent
统一尝试用Oculus集成输入( CustomEvent )触发CustomEvent
香草JS动画？
香草JS中的DOM操作
从dom- CustomEvent中的元素中触发一个
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
