以这种方式绑定事件处理程序的问题是错误的吗?

Exi*_*tos 0 javascript jquery

我正在尝试使用jQuery绑定事件处理程序:

$(document).ready(function () {

            var newsScrollerForPage = new NewsScroller();
            newsScrollerForPage.init();

           $('#scroller-left-a').bind('onclick', newsScrollerForPage.decreasePage());

});


<div class="scroller-left">
        <a id="scroller-left-a" href="#">
            <img src="/Images/Left-Scroller.jpg"/>
        </a>
</div>
Run Code Online (Sandbox Code Playgroud)

但我遇到了问题:

handler is undefined [Break On此错误] if(!handler.guid){

我尝试绑定此事件处理程序的方式有什么问题吗?

T.J*_*der 5

你在这方面做了什么:

$('#scroller-left-a').bind('onclick', newsScrollerForPage.decreasePage());
Run Code Online (Sandbox Code Playgroud)

...正在调用你的函数,并将其返回值传递给bind.(你也在使用错误的名字.)

代替:

$('#scroller-left-a').bind('click', $.proxy(newsScrollerForPage.decreasePage, newsScrollerForPage));
Run Code Online (Sandbox Code Playgroud)

有三个变化:

  1. 使用"点击",而不是"onclick".

  2. 不要打电话给你的功能,参考它.

  3. 因为我假设你想this在你的内容decreasePage中引用newsScrollerForPage,我正在使用$.proxyjQuery来让我们做到这一点.$.proxy接受函数引用(newsScrollerForPage.decreasePage注意()之后没有)和context(newsScrollerForPage)并返回一个新函数,当调用该函数时,将调用该函数并this在调用所提供的上下文期间设置上下文(值).

或者,$.proxy您可以直接使用闭包:

$('#scroller-left-a').bind('click', function() {
    newsScrollerForPage.decreasePage();
});
Run Code Online (Sandbox Code Playgroud)

这是有效的,因为匿名函数是newsScrollerForPage符号的闭包.但是$.proxy(除了它的参数是向后的事实,恕我直言)的优点是,如果您正在执行此操作的范围包含大量数据,您不希望将其关闭,则会为您创建一个更加包含的闭包.(如果这没有意义,我的文章闭包并不复杂可能有帮助.)