JSFiddle - React, Tailwind, and code Playground

by nosir

HTML

<button class="btn-declare">declare flower</button>
<br/><br/>
<button class="btn-attach">attach</button>
<button class="btn-destroy">destroy</button>

JavaScript

var btnDeclare = document.querySelector('.btn-declare');
var btnAttach = document.querySelector('.btn-attach');
var btnDestroy = document.querySelector('.btn-destroy');

function LateBloomer() {
    this.petalCount = 5;
}

LateBloomer.prototype.attach = function() {
    var owner = this;

    owner.declareBind = owner.declare.bind(owner);
    btnDeclare.addEventListener('click', owner.declareBind);
};

LateBloomer.prototype.declare = function() {
    alert('petal count:' + this.petalCount);
};

LateBloomer.prototype.destroy = function() {
    var owner = this;

    btnDeclare.removeEventListener('click', owner.declareBind);
};

var flower = new LateBloomer();
flower.attach();

btnAttach.addEventListener('click', function() {
    flower.attach();
});

btnDestroy.addEventListener('click', function() {
    flower.destroy();
});