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.

• Andrew Fleming: I can see how your code is easier to read. Thanks for the suggestion Inkbug.