How to create, add custom properties to and fire custom events in vanilla Javascript

Question

Scenario:

While browsing the web for a solution to Javascript Custom Events, I couldn't find any practical examples, and even the MDN resource is really limited.

I am trying to rebuild paperjs' onMouseDrag event. My intended use is for a paint-like web-application.

The onMouseDrag event fires when:

• The left mouse button is down
• The mouse is moving

Goal:

The goal here is not to have a working onMouseDrag event. The goal is to have a clear explanation and example of how to create a CustomEvent. The onMouseDrag event is only there as an example.

Requirements:

1. The answer should be in vanilla-js or plain js. (no jQuery or any other library)
2. The answer should use new CustomEvent() or new Event(), not any of the deprecated methods.
3. When mousedrag gets called, the event argument passed should be the same event argument which mousemove receives.

Code:

I've tried the following

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

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

FIDDLE

Answer 2

To add more data to the event object, the CustomEvent interface exists and the detail property can be used to pass custom data. For example, the event could be created as follows:

const event = new CustomEvent('build', { detail: elem.dataset.time }); This will then allow you to access the additional data in the event listener:

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