0

我想将脚本放在一个单独的函数中的匿名函数中，这样我就可以在不复制代码的情况下在各种元素上使用它。该脚本需要同时访问this和e。 myID1在尝试使用单独的函数之前使用匿名函数。 myID2有效，但我感觉不是首选方式。 myID3可以访问this，但我不知道如何访问e。这是怎么做到的？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Testing</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
        function otherFunction2(e,This){console.log(e,This);} 
        function otherFunction3(){console.log(this);} 
            $(function(){
                $('#myID1').on("click", "a.myClass", function(e){console.log(e,this);});
                $('#myID2').on("click", "a.myClass", function(e){otherFunction2(e,this);});
                $('#myID3').on("click", "a.myClass", otherFunction3); //Can't access e
            });
        </script>
    </head>

    <body>
        <div id="myID1"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
        <div id="myID2"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
        <div id="myID3"><a href="javascript:void(0)" class="myClass">Click Me</a></div>
    </body> 
</html>
4

3 回答 3

2

传递给的函数（或函数引用）on使用一个参数调用：eventObject. 您可以参考任何您想要的...e很好。

然后，this隐式定义（不是参数）的值会自动设置为触发事件的元素。因此，如果您想传递参考，请设置参考，如：

function someFunction(e) {
    console.log(e, this);
}

您只需要设置一个参数，并this自动正确定义。

如果您想从事件处理程序中调用不同的函数，就像使用#myID2and一样someFunction2，您可以显式传递它们（就像您拥有的那样），或者使用call.

参考：

于 2013-04-29T16:33:49.357 回答
2

要otherFunction3()访问e，只需e在参数列表中声明即可。该参数由 jQuery 自动传递，即使它没有声明：

function otherFunction3(e) { ... }

因为你#myID2需要.call()：otherFunction2

$('#myID2').on("click", "a.myClass", function(e) {
    otherFunction2.call(this, e);
});

此时变量内otherFunction2的this点将照常设置，您可以删除This您传递的参数。

于 2013-04-29T16:36:51.420 回答
0

JavaScript 不允许方法重载。它使用不同的方法：每个函数范围中可用的arguments对象。您可以通过此对象访问提供的函数参数，就像使用数组一样。所以你可以使用这个：

function otherFunction3(){console.log(this, arguments[0])}

此外，关于，在“类”的所有实例上使用callotherFunction2方法是一种更好的方法，它是本机方法。或者，您可以使用apply。不同之处在于，将无限数量的参数传递给您的函数，而只接受 2 个。在这两种情况下，第一个始终是您的范围，所有后续都类似于您的参数。Apply 将接受一个数组作为第二个参数，其中包含要传递给函数的所有参数。Functioncallapplythis

代码如下所示：

$('#myID2').on('click', 'a.myClass', function(e){otherFunction2.call(this, e);});

您将分别删除This参数并将其替换为console.log调用中的小写“等效”。我相信这实际上是不用说的......

于 2013-04-29T16:44:02.123 回答