[英]How to create, add custom properties to and fire custom events in vanilla Javascript
While browsing the web for a solution to Javascript Custom Events, I couldn't find any practical examples, and even the MDN resource is really limited.在网上浏览 Javascript 自定义事件的解决方案时,我找不到任何实际示例,甚至 MDN 资源也非常有限。
I am trying to rebuild paperjs' onMouseDrag event .我正在尝试重建paperjs 的 onMouseDrag 事件。 My intended use is for a paint-like web-application.我的预期用途是用于类似绘画的网络应用程序。
The onMouseDrag event fires when: onMouseDrag 事件在以下情况下触发:
The goal here is not to have a working onMouseDrag
event.这里的目标不是让onMouseDrag
事件有效。 The goal is to have a clear explanation and example of how to create a CustomEvent
.目标是对如何创建CustomEvent
有一个清晰的解释和示例。 The onMouseDrag
event is only there as an example. onMouseDrag
事件仅作为示例。
new CustomEvent()
or new Event()
, not any of the deprecated methods.答案应该使用new CustomEvent()
或new Event()
,而不是任何已弃用的方法。I've tried the following我试过以下
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
// The event argument passed should be
// the same event as the event passed by any other mouse event.
// Do something while the mouse is being dragged.
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown) {
elem.dispatchEvent('mousedrag');
// Pass the event variable to the dispatched mousedrag.
}
});
You almost got it, but you have dispatch the original event you created, not the string你几乎明白了,但是你已经调度了你创建的原始事件,而不是字符串
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
console.log(event)
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown)
elem.dispatchEvent(onMouseDrag);
});
EDIT:编辑:
It seems you can just add properties to the event object似乎您可以向事件对象添加属性
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
var div = document.createElement('div');
div.className = 'point';
div.style.top = (event.clientY-71) + 'px';
div.style.left = (event.clientX-41) + 'px';
elem.appendChild(div);
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown) {
onMouseDrag.clientX = event.clientX;
onMouseDrag.clientY = event.clientY;
elem.dispatchEvent(onMouseDrag);
}
});
To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data.要向事件对象添加更多数据,CustomEvent 接口存在,并且可以使用 detail 属性来传递自定义数据。 For example, the event could be created as follows:例如,可以按如下方式创建事件:
const event = new CustomEvent('build', { detail: elem.dataset.time });
This will then allow you to access the additional data in the event listener:这将允许您访问事件侦听器中的附加数据:
function eventHandler(e) {
console.log('The time is: ' + e.detail);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.