You almost got it, but you have dispatch the original event you created, not the string
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:
It seems you can just add properties to the event object
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);
}
});