javascript - 如何在 vanilla Javascript 中创建、添加自定义属性和触发自定义事件

Question

场景:

在网上浏览Javascript Custom Events的解决方案时，我找不到任何实际的例子，甚至MDN资源也很有限。

我正在尝试重建 paperjs' onMouseDrag event .我的预期用途是用于类似绘画的网络应用程序。

onMouseDrag 事件在以下情况下触发:

• 鼠标左键按下
• 鼠标在移动

目标:

这里的目标是不有一个有效的 onMouseDrag 事件。目标是对如何创建 CustomEvent 进行清晰的解释和示例。 onMouseDrag 事件仅作为示例。

要求:

1. 答案应该在vanilla-js中或普通的js。 (没有 jQuery 或任何其他库)
2. 答案应该使用 new CustomEvent() 或 new Event()，而不是任何已弃用的方法。
3. 当 mousedrag 被调用时，传递的事件参数应该与 mousemove 接收的事件参数相同。

代码:

我试过以下方法

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.
    }
});

Answer 1

你几乎明白了，但是你派发了你创建的原始事件，而不是字符串

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);
    }
});

FIDDLE