Как создавать, добавлять пользовательские свойства и огонь пользовательских событий в ванильным Javascript

Question

Сценарий:

При просмотре веб-страниц для решения Javascript пользовательских событий, я не мог найти какие-либо практические примеры и даже ресурс MDN действительно ограничен.

Я пытаюсь перестроить paperjs' onMouseDrag event. Мое предназначение - для рисования в виде веб-приложения.

Пожары событий onMouseDrag когда:

• Левая кнопка мыши нажата
• Мышь движется

Цель:

Цель здесь не иметь рабочее событие onMouseDrag. Цель состоит в том, чтобы иметь четкое описание и пример о том, как создать CustomEvent. Событие onMouseDrag присутствует только в качестве примера.

Требования:

1. Ответ должен быть в vanilla-js или равнинных JS. (no 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); 
}); 

EDIT:

Кажется, вы можете просто добавить свойства объекта события

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