【问题标题】：How to create, add custom properties to and fire custom events in vanilla Javascript如何在 vanilla Javascript 中创建、添加自定义属性和触发自定义事件
【发布时间】：2014-02-01 23:50:10
【问题描述】：

场景：

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

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

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

鼠标左键按下
鼠标在移动

目标：

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

要求：

答案应该是vanilla-js 或者纯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.
    }
});

【问题讨论】：

标签： javascript events custom-event

【解决方案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

【讨论】：

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

【解决方案2】：

要向事件对象添加更多数据，存在 CustomEvent 接口，并且可以使用 detail 属性来传递自定义数据。例如，可以按如下方式创建事件：

const event = new CustomEvent('build', { detail: elem.dataset.time }); 这将允许您访问事件侦听器中的其他数据：

function eventHandler(e) {
  console.log('The time is: ' + e.detail);
}

【讨论】：