JSFiddle - React, Tailwind, and code Playground
HTML
<div class="myClass">Click Me 1</div>
<div class="myClass">Click Me 2</div>
<dl> <dt>This is based on the following standards:</dt>
<dd><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank">Object.defineProperty()</a>
</dd>
<dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" target="_blank">EventTarget.addEventListener</a>
</dd>
</dl>
CSS
.myClass {
font-weight: bold;
cursor: pointer;
border: 1px solid #000;
}
.selected {
color: #F00;
}
JavaScript
Object.defineProperty(NodeList.prototype, "addEventListener", {
value: function (event, callback, useCapture) {
useCapture = ( !! useCapture) | false;
for (var i = 0; i < this.length; ++i) {
if (this[i] instanceof Node) {
this[i].addEventListener(event, callback, useCapture);
}
}
return this;
}
});
var e = document.getElementsByClassName("myClass");
e.addEventListener("click", function (event) {
event.target.classList.toggle("selected");
}, false);