JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div contenteditable="true">content editable</div>

    <input value="input value">
    <input readonly value="readonly input value">
    <input disabled value="disabled input value">

    <textarea>textarea</textarea>
    <textarea readonly>readonly textarea</textarea>
    <textarea disabled>disabled textarea</textarea>

    <input id="clear" type="button" value="clear">
</div>
<pre id="log"></pre>

JavaScript

document.addEventListener('select', function(e) {
    log.innerHTML += 'select\n';
});

document.addEventListener('selectstart', function(e) {
    log.innerHTML += 'selectstart\n';
});

document.addEventListener('selectionchange', function(e) {
    log.innerHTML += 'selectionchange\n';
});

clear.addEventListener('click', function() {
    log.innerHTML = "";
});