javascript - prototype.js 库中的事件处理

Question

我发现prototype.js库提供了事件处理机制，但我无法弄清楚以下代码片段有什么问题:

    <div>
        <div id="foo">Bla-bla</div>
    </div>

    <script type="text/javascript">
        function onFooKeyup(e)
        {
            var element = e.element();
            if (e.keyCode == Event.KEY_ESC) 
                    element.innerHTML="TEST";
        }
        //document.observe('keydown', onFooKeyup);
        $('foo').observe('keydown', onFooKeyup);
    </script>

基本上我想在用户按下退出按钮时更改某些 div block 的内容(或进行样式设置等)。问题是观察 foo id 不会导致任何操作，而观察文档(注释行)确实会触发更改。如果我用输入标记替换我的 foo div block ，例如

  <div><input type="text" id="foo" /></div>

然后事件将被正确触发。这是一个错误吗？

Answer 1

这是因为该事件并非源自<div>内部。元素，所以你不能 observe它(听它)在那里。以<div>为例带有 <input> 的 block 标签，事件实际上起源于该元素内部(我认为，如果输入具有用户焦点，但这里不相关)。所以不，这不是一个错误。

只需在文档级别捕获键盘事件，因为按键事件将源自不同的元素(不同的浏览器以不同的方式管理此事件)，但它们都会冒泡到文档(除非您停止事件的传播)。