如何在vanilla Javascript中创建，添加自定义属性并触发自定义事件

Question

方案：

在浏览网页寻找Javascript自定义事件的解决方案时，我找不到任何实际的例子，甚至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

Answer 2

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

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

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