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

我正在为

mouseleave

事件处理程序构建一个简单的jQuery脚本，它将在事件处理程序中交替使用

和
backleafimage
的源图像，以避免我不得不在该处理程序中再次编写相同的代码。是否可能，如果是，如何实现？
首先，局部变量是它们在其中定义的函数的局部变量，因此一个事件的事件处理程序函数内的变量对于在该函数外定义的另一个事件处理程序函数不可用

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

下面是一个代码示例：

            $("#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() {
               ....
            });

注意，这是一种比将变量移动到更高的范围并尝试共享它们更好的方法，因为在这里，对于每次事件发生，它们都被正确初始化，如果您的事件处理程序正在服务多个对象，或者事件以异常顺序到达，它们甚至可以提前工作。
按照@jfriend00 answer的思路，可以利用
hover（）
触发两个事件，并将两个处理程序合并为一个

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

为什么不在全局范围内定义它们？或者，您也可以为
mouseenter mouseleave
$("#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
    }

});