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

Question

当我尝试使用以下参数附加事件处理函数时:

myhandle.onclick = myfunction(param1,param2);

function myfunction(param1,param2){
}

现在我想在我的处理函数中访问事件对象.网络上提到了一种发送事件对象的方法,例如:

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

但是当我测试它时,它给出的事件对象是未定义的.

我知道库使这个东西变得容易,但我正在寻找一个原生的JS选项.

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))
            );
        };
    };
}

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。