![](/img/trans.png)
[英]How to add custom properties to custom constructors in javascript?
[英]How to create, add custom properties to and fire custom events in vanilla Javascript
在网上浏览 Javascript 自定义事件的解决方案时,我找不到任何实际示例,甚至 MDN 资源也非常有限。
我正在尝试重建paperjs 的 onMouseDrag 事件。 我的预期用途是用于类似绘画的网络应用程序。
onMouseDrag 事件在以下情况下触发:
这里的目标不是让onMouseDrag
事件有效。 目标是对如何创建CustomEvent
有一个清晰的解释和示例。 onMouseDrag
事件仅作为示例。
new CustomEvent()
或new Event()
,而不是任何已弃用的方法。我试过以下
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.
}
});
你几乎明白了,但是你已经调度了你创建的原始事件,而不是字符串
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);
});
编辑:
似乎您可以向事件对象添加属性
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);
}
});
要向事件对象添加更多数据,CustomEvent 接口存在,并且可以使用 detail 属性来传递自定义数据。 例如,可以按如下方式创建事件:
const event = new CustomEvent('build', { detail: elem.dataset.time });
这将允许您访问事件侦听器中的附加数据:
function eventHandler(e) {
console.log('The time is: ' + e.detail);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.