在 jQuery 中的链式事件处理程序之间传递局部变量答案

【问题标题】：Passing local variables between chained event handlers in jQuery在 jQuery 中的链式事件处理程序之间传递局部变量
【发布时间】：2015-07-19 19:49:09
【问题描述】：

我正在构建一个简单的 jQuery 脚本，它将在我的网站上替换 <img> 元素的源图像。我想知道是否可以将局部变量从一个事件处理程序（用于mouseenter）传递到下一个用于mouseleave 事件的链式处理程序。这是我的代码：

            $("#homepage-media-slider li > img").on('mouseenter', function() {
                var ele = $(this);
                var eleSrc = $(this).attr('src');
                var overleafImage = $(this).attr('data-overleaf');
                ele.attr('src', overleafImage);
                ele.attr('data-overleaf', eleSrc);
            }).on('mouseleave', function() {
               ....
            });

我希望能够在mouseleave 事件处理程序的事件处理程序中使用ele、eleSrc 和overleafImage，以便不必在此处理程序中再次编写相同的代码。有没有可能，如果有，怎么做？

【问题讨论】：

为什么不在全局范围内定义它们？或者，您也可以为 mouseenter mouseleave 指定一个回调

标签： javascript jquery

【解决方案1】：

首先，局部变量对于定义它们的函数是局部的，因此一个事件的事件处理函数内部的变量对于在该函数外部定义的另一个事件处理函数是不可用的。

您可以通过将两个事件处理程序组合成一个事件处理函数来避免重复代码，您可以在其中使用通用设置，然后根据事件进行分支。

这是一个代码示例：

        // set up a single event handler for multiple events
        $("#homepage-media-slider li > img").on('mouseenter mouseleave', function(e) {
            // common code setup here
            var ele = $(this);
            var eleSrc = $(this).attr('src');

            // branch based on the event that occurred here
            if (e.type === "mouseenter") {
                // mouseenter code here
                var overleafImage = $(this).attr('data-overleaf');
                ele.attr('src', overleafImage);
                ele.attr('data-overleaf', eleSrc);
            } else {
                // mouse leave code here
            }
        });

请注意，这比将变量移动到更高的范围并尝试共享它们要好得多，因为在这里，它们会为每个事件发生正确初始化，并且如果您的事件处理程序服务于多个对象或如果事件以不寻常的顺序到达。

【讨论】：

非常好的答案，读者也可以查看stackoverflow.com/a/17301520/10980607

【解决方案2】：

@jfriend00 回答可以利用 hover() 触发这两个事件并将两个处理程序合并为一个

$("#homepage-media-slider li > img").hover(function (e) {
    // which way are we going ?
    var isEnter = e.type === "mouseenter",
        ele = $(this),
        eleSrc = $(this).attr('src'),
        overleafImage = $(this).attr('data-overleaf');
    if (isEnter) {
        //mouseenter code
        ele.attr('src', overleafImage);
        ele.attr('data-overleaf', eleSrc);
    } else {
        // mouseleave code here
    }

});

【讨论】：