在事件处理程序中访问事件对象

Question

当我尝试使用参数附加事件处理程序函数时，例如：

myhandle.onclick = myfunction(param1,param2);

function myfunction(param1,param2){
}

现在我想在我的处理函数中访问事件对象。有一种在网上提到的方法是发送事件对象，例如：

myhandle.onclick = myfunction(event,param1,param2);

但是当我测试它时，它会给出事件对象未定义的错误。

我知道库可以使这些变得容易，但我正在寻找一种原生JS的选项。

- Rajat

Answer 1

myhandle.onclick = myfunction(param1,param2);

这是JavaScript初学者常见的错误，也不是库可以为您修复的问题。

您没有将myfunction分配为单击处理程序，而是使用param1和param2作为参数调用myfunction，并将函数的返回值分配给onclick。 myfunction不返回任何内容，因此您将分配undefined给onclick，这将没有任何效果。

您的意思是要将对myfunction本身的引用分配：

myhandle.onclick= myfunction;

为了向函数传递一些额外的参数，您需要创建一个包含它们值的闭包，通常使用匿名内联函数来完成。如果需要，它还可以处理传递事件（尽管无论如何，您都需要为 IE 准备备用方案，因为该事件对象不作为参数传递）：

myhandle.onclick= function(event) {
    myfunction(param1, param2, event);
};

在ECMAScript第五版中，它也是JavaScript的未来版本，你可以更轻松地写出这个代码：

myhandle.onclick= myfunction.bind(window, param1, param2);

（使用 window 作为这个情况下不需要的 this 的虚拟值。）然而，由于许多现代浏览器不支持第五版，如果你想使用这种方法，就必须为旧版浏览器提供实现。有些库已经包含了一个实现；这里是另一个独立的实现。

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

- bobince

Answer 2

我不确定你想要做什么，但也许像这样的东西是你正在寻找的？

function myfunction(param1, param2){
    return function(event) {
        // For compatibility with IE.
        if (!event) {
            event = window.event;
        }

        alert("event = " + event + ", param1 = " + param1 + ", param2 = " + param2);
    };
}

myhandle.onclick = myfunction(param1, param2);

这将导致myfunction内部的匿名函数被调用作为onclick处理程序，从而导致事件和两个参数被打印。这两个参数在添加事件处理程序时是固定的，而event会在用户每次单击myhandle时发生变化。

- John Kugelman

Answer 3

试试这个：

if (!event) { event = window.event; }

在我的函数内部。

- Seph