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

在浏览网页寻找Javascript自定义事件的解决方案时，我找不到任何实际的例子，甚至MDN资源也非常有限

我正在努力重建。我的预期用途是用于类似绘画的web应用程序

onMouseDrag事件在以下情况下激发：

• 鼠标左键按下了
• 老鼠在动

目标： 这里的目标不是让onMouseDrag

事件工作。目标是对如何创建
CustomEvent
有一个清晰的解释和示例。
onMouseDrag
事件只是一个例子

要求：
答案应该是简单的js。（无jQuery或任何其他库）
答案应该使用
new CustomEvent（）
或
new Event（）
，而不是任何不推荐使用的方法
调用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.
    }
});

您几乎得到了它，但是您已经分派了您创建的原始事件，而不是字符串

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

我仍然不确定如何在事件调度时传递自定义数据。（在调度事件时，mousedrag侦听器应接收原始事件）
elem.addEventListener（'mousedrag'，function（event）{var x=event.offsetX，y=event.offsetY；console.log（x，y）；//logs undefined，undefined}这是因为只有本机鼠标事件具有指针位置，您必须将它们添加到事件中。给我一点时间看看？