如何在 vanilla Javascript 中創建、添加自定義屬性和觸發自定義事件

Question

設想：

在網上瀏覽 Javascript 自定義事件的解決方案時，我找不到任何實際示例，甚至 MDN 資源也非常有限。

我正在嘗試重建paperjs 的 onMouseDrag 事件。 我的預期用途是用於類似繪畫的網絡應用程序。

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

小提琴

Answer 2

要向事件對象添加更多數據，CustomEvent 接口存在，並且可以使用 detail 屬性來傳遞自定義數據。 例如，可以按如下方式創建事件：

const event = new CustomEvent('build', { detail: elem.dataset.time }); 這將允許您訪問事件偵聽器中的附加數據：

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