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

Posted 2023-02-19

【中文标题】在事件处理程序中访问事件对象

【英文标题】：Access event object in event handler

【发布时间】：2010-12-06 04:42:19

【问题描述】：

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

myhandle.onclick = myfunction(param1,param2);

function myfunction(param1,param2)

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

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

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

我知道库可以让这些事情变得简单，但我正在寻找原生 JS 选项。

【参考方案1】：

myhandle.onclick = myfunction(param1,param2);

这是 javascript 级别的常见初学者错误，并不是库可以真正为您解决的问题。

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

你的意思是给myfunction本身分配一个引用：

myhandle.onclick= myfunction;

要向函数传递一些额外的参数，您必须创建一个包含它们的值的闭包，这通常使用匿名内联函数来完成。如果您需要，它也可以处理传递事件（尽管无论哪种方式，您都需要 IE 的备份计划，其中事件对象不作为参数传递）：

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

在将成为 JavaScript 的未来版本的 ECMAScript 第五版中，您可以更轻松地编写此代码：

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

【参考方案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 时发生变化。

【参考方案3】：

试试这个：

if (!event)  event = window.event; 

myfunction() 内部。