Question

我需要将事件对象和事件源对象传递给处理函数。我相信我理解外部javascript 的工作原理：

<input id="input2"/>
<script>
function getKey2(e) { alert(this.id+e.keyCode); }
document.getElementById("input2").onkeypress = getKey2;
</script>

onkeypress方法在input2 DOM上定义，因此 this 指向它，并且事件对象作为函数的第一个参数传递。但我对内联javascript ：

感到困惑

<input id="input1" onkeypress="getKey1(this,event)"/>
<script>
function getKey1(obj,e) {
    alert(obj.id+e.keyCode);
}
</script>

第一个参数 this 应该是 Window 对象，但是当它被复制到事件上的 obj 时，它就是事件源对象，来自DOM的 input1 。第二个参数 event 应该是全局事件对象，但是在调用时，会将事件对象传递给该函数。显然，我的推论是错误的 - 通话如何运作？

长话短说：为什么以下字符中的对象值不一样？

              | name   object value
----------------------------------
in onkeypress | this   Window
in getKey1    | obj    DOM input1


              | name   object value
----------------------------------
in onkeypress | event  global event
in getKey1    | e      keypress event

fiddle here

Answer 1

W3C DOM规范规定了内联事件的两个绑定：

this绑定到定义内联事件的元素;
引入了名为event的局部变量。（IE不会这样做，但相同的语法适用于内联事件，因为在{1}中event将被视为window.event。）

在HTML5中，信息隐藏在6.1.6.1 Event handlers下。这两部分分散开来：

当设置事件处理程序内容属性时[即，当设置内联事件时] ..让合成函数声明的body []为事件处理程序内容属性的新值.. 让函数有一个名为event 的参数。 [请注意，onerror是一个特殊的。]

..   让Scope [或this]成为NewObjectEnvironment（元素的对象，Scope）的结果。 [这与其他环境上下文如Form一起链接（如果存在））和全球背景。]

Answer 2

不，这将是触发事件的dom对象，在这种情况下<input>是设置的onkeyup属性以及浏览器将在哪里找到处理程序。

我们将对这些事件发挥更多作用：http://jsfiddle.net/nFfEp/

为了更好地理解事件触发和处理，这是一个非常有用的文档：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

浏览器如何处理内联javascript事件？

2 个答案: