javascript - 内联添加事件监听器时如何获取事件对象

Question

假设我添加内联事件处理程序，使用元素的 onclick 属性，如下所示:

<input type="button" value="Submit" onclick='buttonClick()' />

然后这是我的处理程序:

<script type="text/javascript">
    window.buttonClick=function(e){
        e=e||window.event;
        alert(e.type);
        return false;
    }
</script>

现在我想知道如何获取事件对象？由于上面的代码会抛出错误:

e is undefined.

Answer 1

不是在内联事件中使用 event 变量。

在这种情况下，buttonClick 是一个从内联事件调用的函数；被调用的函数没有对 event 变量的魔法访问(window.event 是 IE 的一个特性)。此外，在帖子中，buttonClick 是使用 0 个参数调用的，因此 e 将始终评估为未定义。

在任何情况下，与以下将作为对 the special event variable 的访问的比较是从内联事件本身完成的，然后事件对象被传递给“真正的”事件处理函数:

<input type="button" value="Submit"
       onclick="buttonClick(window.event||event)" />

<script type="text/javascript">
    function buttonClick(e) {
        alert(e.type);
        return false;
    }
</script>

(我建议使用 jQuery 或其他库来简化统一事件访问，但那是另一回事了..)

---

请注意 window.event||event 是一个肮脏的小把戏:

在 IE 中，window.event 将评估为事件对象，并用作表达式的结果(因此 event)永远不会评估。在非 IE 浏览器中，window.event 将评估为未定义(除非有人正在做一些非常糟糕的事情)，因此结果将是 event 变量。

将此反转为 event||window.event 会在不支持 W3C 本地 event 变量方法的浏览器(即 IE)中导致 ReferenceError。