Stop repeating myself: Similar pattern used on multiple event handlers

Question

My code listens for a number of events, and calls the Google Analytics event tracking function when they fire.

Each event uses a similar pattern. Can I achieve the same functionality without repeating myself?

/*jslint debug:true, browser:true, devel:true nomen:true */
/*global _gaq:true, jquery:true, $:true */

function trackEvent(c, a, l) {

    'use strict'; // JSLint

    //console.log(c, a, l); // Dev only

    _gaq.push(['_trackEvent', c, a, l]);

}

$(function () {

    'use strict'; // JSLint

    var alert, carousel, collapse, modal, tab, tooltip, download, external, mailto;

    // Alerts event handler

    alert = function () {

        var alertButton = $(this),
            category = 'Alerts',
            action = alertButton.next().text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('click.alert.data-api', '[data-dismiss="alert"]', alert);

    // Carousel event handler

    carousel = function () {

        var carouselButton = $(this),
            category = 'Carousels',
            action = carouselButton.attr('data-slide'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click.carousel.data-api', '[data-slide]', carousel);

    // Collapse event handler

    collapse = function () {

        var category = 'Collapses',
            action = $(this).text(),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click.collapse.data-api', '[data-toggle=collapse]', collapse);

    // Modal event handler

    modal = function () {

        var category = 'Modals', action, label, activeModal;

        activeModal = $(this).attr('href');
        action = $(activeModal).find('h3').text();

        trackEvent(category, action, label);
    };

    $('body').on('click.modal.data-api', '[data-toggle="modal"]', modal);

    // Tab event handler

    tab = function () {

        var category = "Tabs",
            action = $(this).text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', tab);

    // Tooltip event handler

    tooltip = function () {

        var category = "Tooltips",
            action = $(this).text(),
            label;

        trackEvent(category, action, label);

    };

    $('body').on('mouseenter', '[rel="tooltip"], [rel="popover"]', tooltip);

    // Download link event handler

    download = function () {

        var category = "Downloads",
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a[href$="pdf"], a[href$="doc"], a[href$="docx"], a[href$="rtf"], a[href$="ppt"], a[href$="zip"]', download);

    // Mailto event handler

    mailto = function () {
        var category = 'Mailto',
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a[href^="mailto"]', mailto);

    // External link event handler

    $.expr[':'].external = function (a) {
        var PATTERN_FOR_EXTERNAL_URLS = /^\w+:\/\//,
            href = $(a).attr('href');
        return href !== undefined && href.search(PATTERN_FOR_EXTERNAL_URLS) !== -1;
    };

    external = function () {

        var category = 'External links',
            action = $(this).attr('href'),
            label;

        trackEvent(category, action, label);
    };

    $('body').on('click', 'a:external', external);

});

Answer 1

Id suggest something like:

$('body').on('click.alert.data-api', '[data-dismiss="alert"]', function () {
  trackEvent('Alerts', $(this).next().text());
});

instead of the whole alert code, and similar things for the other items.