Имате ли идея как един span елемент най-културно да реагира, когато текстовия курсор влезе в него? Тук говорим за вариант при който някакъв обхващащ span-а елемент е зададен като contenteditable=true.

За нещо такова ли става дума ?

<div contenteditable="true" id="editor">
<span>Please type something in here</span>
</div>
<textarea id="log" rows="10" cols="40" readonly></textarea>

document.getElementById("editor").addEventListener("input", function() {
    document.getElementById("log").value += "input event fired\n";
}, false);

Delegate

За нещо такова ли става дума ?

<div contenteditable="true" id="editor">
<span>Please type something in here</span>
</div>
<textarea id="log" rows="10" cols="40" readonly></textarea>

document.getElementById("editor").addEventListener("input", function() {
    document.getElementById("log").value += "input event fired\n";
}, false);

Не защото събитието "input" реагира само при промяна. Цели се реакцията да имаме при самото влизане на курсора. Освен това ми се иска и да има реакция при излизането/изчезването на последния, но това вече е по-трудно и си е вид втора задача.

За момента се сещам само за вариант при прихващане на събития onclick, onkeypress и onfocusout и съответни специфични проверки вътре, но това определено не е най-културния начин.

<div contenteditable="true" id="someDiv">
  
  testtstsdsds
   </div>

<textarea id="log" rows="10" cols="40" readonly></textarea>

function setChangeListener (div, listener) {

    div.addEventListener("blur", listener);
    div.addEventListener("keyup", listener);
    div.addEventListener("paste", listener);
    div.addEventListener("copy", listener);
    div.addEventListener("cut", listener);
    div.addEventListener("delete", listener);
    div.addEventListener("mouseup", listener);

}

var div = document.querySelector("#someDiv");

setChangeListener(div, function(event){
    document.getElementById("log").value += event+"\n";
});

Само mouseup не е достатъчно, а трябва и други събития да се прихванат. Освен това има още много да се прави, защото аз не искам нещата да са за div, а за съдържан в него span! Т. е. говорим за събитие, което интуитивно можем да опишем като "onSelectionChange" (защото самият курсор си е всъщност точно такъв вид селекция като се борави с него).