Zdarzenia klawiatury dla elementów potomnych w diveded content?

Mam div, którego właściwość contenteditable została ustawiona na true. Jak skłonić dzieci do reagowania na zdarzenia klawiatury? Wygląda na to, że jedynym sposobem jest przechwycenie zdarzeń w macierzystym div i określenie dziecka przez apis wyboru. Czy jest lepszy sposób? Dokładniej, czy mogę dołączyć obsługę zdarzeń klawiatury do elementów potomnych? Czy czegoś mi brakuje?

Załączony jest przykładowy kod ilustrujący problem. Mam nadzieję, że komentarze w kodzie są wystarczająco objaśniające.

<code><HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<div id="editable" contentEditable='true' style='height: 130px; width: 400px; border-style:solid; border-width:1px'>
    <span id="span1" onkeypress="alert('span1 keypress')">test text 1</span> <!-- does not work -->
    <span id="span2" > test text2</span>
    <span id="span3" onclick="alert('span3 clicked')">test text 3</span>  <!-- this works fine -->
</div>
<!-- Uncomment this to set a keypress handler for span2 programatically. still doesnt work -->
<!--
<script type="text/javascript">
    var span2 = document.getElementById('span2');
    span2.onkeypress=function() {alert('keypressed on ='+this.id)};
</script>
-->

<!-- Uncomment this to enable keyboard events for the whole div. Finding the actual child that the event is happening on requires using the selection api -->
<!--
<script type="text/javascript">
    var editable = document.getElementById('editable');
    editable.onkeypress=function() {alert('key pressed on ='+this.id+';selnode='+getSelection().anchorNode.parentNode.id+',offset='+getSelection().getRangeAt(0).startOffset)};
</script>
-->
</BODY>
</HTML>
</code>

questionAnswers(1)

yourAnswerToTheQuestion