What is proper way to create Evented Control in Leaflet?

Question

I need to create L.Control subclass which is L.Evented too. include: [ L.Mixin.Events ] works, but shows warning that it is deprecated and I need to inherit from L.Evented. But I can not as I need to inherit from L.Control. What do I suppose to do?

Answer 1

You can mix in L.Evented yourself into your custom control, something like this:

var CustomControl = L.Control.extend({
});
L.extend(CustomControl.prototype, L.Evented.prototype);

You can then trigger events and listen to them:

var cc = new CustomControl();
cc.on('myevent', function(s) {
    console.log("event fired");
    console.log(s);
});
cc.fire('myevent', {})

And a demo based on http://leafletjs.com/examples/extending/extending-3-controls.html#controls (clicking on the Leaflet logo fires an event)

var map = L.map('map', {
    center: [40, 0],
    zoom: 1
});

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: "CartoDB"
}).addTo(map);

L.Control.Watermark = L.Control.extend({
    onAdd: function(map) {
        var img = L.DomUtil.create('img');

        img.src = 'http://leafletjs.com/docs/images/logo.png';
        img.style.width = '200px';

        img.addEventListener('click', ()=> {
            this.fire('myevent');
        });
        this.img

        return img;
    }
});
L.extend(L.Control.Watermark.prototype, L.Evented.prototype);

var mark = new L.Control.Watermark({ position: 'bottomleft' }).addTo(map);
mark.on('myevent', function() {
    console.log('clicked');
})

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 150px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<div id='map'></div>