select div by id using vanilla JS instead of JQuery $ selector to apply Raphaeljs method

Question

I'm using RaphaelJs' mousedown() method. The problem is, I want to apply mousedown() on div which is being selected using $(id) selector of JQuery. I want to use vanilla Js for it because I don't want to use Jquery for some performance reasons. (See code on JsFiddle).

I tried document.getElementById() method, but the object returned by it is not compatible with RaphaelJs' mousedown() method

can anyone suggest me any way to get this done?

let idRaw = document.getElementById('canvas');
let id = '#canvas';

/**
* I want idRaw.mousedown(...); instead of $(id).mousedown(...);
* to know more check the jsFiddle link above
*/

$(id).mousedown(...);
$(id).mousemove(...);
$(id).mouseup(...);

Answer 1

What about this:

idRaw.addEventListener('mousedown', e => {
    // Your code
)

Answer 2

Try to define event callbacks like below-

idRaw.onmouseover = function (e) {
     // your code of mouse over event handler
};

Please refer the documentation https://www.w3schools.com/jsref/event_onmouseover.asp