sequence of parameters with bind()

I try to put some html element object in a class und
write addEventListener which should work for all instances.

I found a solution, but I don´t understand it.
eg.

class ValueSlider extends HTMLDivElement {
    constructor() {
        .  .  .
        this.startDrag = function(el, evt) {
            let thisNow = this; // class object
            let element = el; // mySvg object
            let event = evt; // event object
            .  .  .
        }

        this.evHandler = this.startDrag.bind(this, this.mySvg);

        this.mySvg.addEventListener("mousedown", this.evHandler );
    }
}

Why the function receives the event object as last parameter ?

Thank you for discussion
Erhie

Comments

[Codecupdev]

Is it possible to see the rest of the code for the this.startDrag? When you use addEventListener you can pass in three parameters:

• The event type
• The listener
• Other options The listener is the code you want to run when the event happens - remember that functions are objects in JavaScript.

As I read your code currently you could also implement it like this-

this.mySvg.addEventListener('mousedown', this.startDrag.bind(this));

Without seeing what startdrag is doing completely and what behaviour you want to achieve on the event, it is a bit hard to clarify any further.

[Erhie]

a more complete example:

<script type="text/javascript">
/* in html:
<div is="value-slider"</div>
*/

window.addEventListener('DOMContentLoaded', function(contentLoaded) {
    customElements.define('value-slider', ValueSlider, { extends: 'div' });
}
.  .  .
class ValueSlider extends HTMLDivElement {
    .  .  .
    constructor() {
        const shadow = this.attachShadow({mode: 'open'});
        this.sliderDiv = document.createElement('div');
        shadow.append(this.sliderDiv);
        this.slThumb = document.createElement('div');
        sliderDiv.append(this.slThumb);
        .  .  .
        this.startDragHandler =  this.startDrag.bind(this, this.sliderDiv);
        this.slThumb.addEventListener("mousedown", this.startDragHandler );
        }

    startDrag( divOuter, evt) {
        // why is the evt object the second parameter ?

        divOuter.style["background-color"] = "GREY";

        this.startPosY = evt.clientY;
        this.slThumb.addEventListener('mousemove', this.dragEventHandler);
        this.slThumb.addEventListener("mouseup", this.endDragEventHandler );
        this.slThumb.addEventListener("mouseleave",  this.endDragEventHandler);
    }
}

[Codecupdev]

Thanks - When you are working with a function from an event handler it is not uncommon to see a parameter called event. Sometimes this is called e or in your case evt. It represents the event object. It is passed automatically and provides you with extra details/functionality. It is not to do with bind but more from the event handler itself. You can find more details here developer.mozilla.org/en-US/docs/L...

Does this help?