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 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.
new CustomEvent()
or new Event()
, not any of the deprecated methods.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.
}
});
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);
}
});