为什么在事件发生之前调用这些事件回调？

Question

I am working with event listeners outside the scope of Angular and jQuery, and I am exploring recursion at the same time.

In this example, I want to add a simple listener to all members of a class that colors the text on mouseover and reverts the color on mouseleave.

For each member of the class when button T is toggled on,

$scope.buttons = document.getElementsByClassName('buttons');
for (var a = 0; a < $scope.buttons.length; a++) {
    colorButtons($scope.buttons[a], 'open');
};

and then toggled off

$scope.buttons = document.getElementsByClassName('buttons');
for (var a = 0; a < $scope.buttons.length; a++) {
     colorButtons($scope.buttons[a], 'open');
};

I want to call a function that either adds itself as an event listener for each of these elements or executes the coloring needed:

function colorButtons(that, way) {
    switch(way) {
        case('open'):
            that.addEventListener('mouseover', colorButtons(that, null));
            that.addEventListener('mouseleave', colorButtons(that, undefined));
            break;
        case('close'):
            that.removeEventListener('mouseover', colorButtons(that, null));
            that.removeEventListener('mouseleave', colorButtons(that, undefined));
            break;
        case(null):
            $(that).css('color', '#e6ffff');
            break;
        case(undefined):
            $(that).css('color', '#000000');
            break;
        }
}

However, I am finding that the callbacks for the event listeners are being called on the initial toggle, not on hover/hover-off, and I am wondering why.

Answer 1

Ok, so, one way to solve this problems involves recognizing, first, as @elclanrs points out, that listeners expect functions, not results. Therefore, we cannot pass params into listener callbacks.

Instead, the best way to substitute for params is to create a cache object, ie

$scope.buttonCache = { that: {}, way: '' };

and substitute these properties for the params like so:

$scope.buttons = document.getElementsByClassName('buttons');
for (var a = 0; a < $scope.buttons.length; a++) {
    $scope.buttonCache.that = $scope.buttons[a];
    $scope.buttonCache.way = 'open';
    colorButtons();
};

...

$scope.buttons = document.getElementsByClassName('buttons');
for (var a = 0; a < $scope.buttons.length; a++) {
     $scope.buttonCache.that = $scope.buttons[a];
     $scope.buttonCache.way = 'close';
     colorButtons();
};

...

function colorButtons() {
    switch($scope.buttonCache.way) {
        case('open'):
            $scope.buttonCache.way = null;
            $scope.buttonCache.that.addEventListener('mouseover', colorButtons);
            $scope.buttonCache.way = undefined;
            $scope.buttonCache.that.addEventListener('mouseleave', colorButtons);
            break;
        case('close'):
            $scope.buttonCache.way = null;
            $scope.buttonCache.that.removeEventListener('mouseover', colorButtons);
            $scope.buttonCache.way = undefined;
            $scope.buttonCache.that.removeEventListener('mouseleave', colorButtons);
            break;
        case(null):
            $($scope.buttonCache.that).css('color', '#e6ffff');
            break;
        case(undefined):
            $($scope.buttonCache.that).css('color', '#000000');
            break;
    }
}