Advanced Front‑End Journey: Mastering Click Event Binding

Introduction

Click events are the most common UI interaction in web development. This article shares the author’s progressive experience with click‑event binding.

Background

The author, a junior front‑end developer, received a task to implement a lottery feature. The back‑end API BX.luckyDraw() was already provided, and the UI required a button with id="lucky-draw".

Practice – Stage 1

Initial attempt

var btn = document.getElementById('lucky-draw');
btn.onclick = function () {
    BX.luckyDraw();
};

This works, but the senior team warns that important buttons need tracking. The author adds a tracking call:

btn.onclick = function () {
    BX.luckyDraw();
    BX.track('lucky-draw');
};

When the tracking code is split into a second .onclick assignment, the lottery function stops working because the later assignment overwrites the former. The author learns that the .onclick property should not be used for multiple handlers.

Switch to standard DOM API

btn.addEventListener('click', function () {
    BX.luckyDraw();
}, false);
btn.addEventListener('click', function () {
    BX.track('lucky-draw');
}, false);

Both handlers now coexist.

Practice – Stage 2

The product manager adds an A/B test: only half of the users should see the lottery button. The button may not exist, causing btn.addEventListener to throw. The author adds a guard:

if (btn) {
    btn.addEventListener('click', function () {
        BX.luckyDraw();
    }, false);
}
if (btn) {
    btn.addEventListener('click', function () {
        BX.track('lucky-draw');
    }, false);
}

Although functional, the repeated checks feel clumsy.

jQuery shortcut

"Fool, why not just use jQuery?"

jQuery silently ignores missing elements and provides a cleaner API:

var $btn = $('#lucky-draw');
$btn.on('click', function () {
    BX.luckyDraw();
});
$btn.on('click', function () {
    BX.track('lucky-draw');
});

Practice – Stage 3

The lottery button is injected dynamically inside a “Surprise” tab. The author needs to bind before the element exists, so he uses event delegation:

$(document.body).on('click', '#lucky-draw', function () {
    BX.luckyDraw();
});

Event delegation works because it relies on event bubbling.

To avoid many similar delegated handlers, the author gives all interactive elements a common class .action and writes a single delegate:

$body.on('click', '.action', function () {
    // WHEN CLICK ANY '.action', WE COME HERE.
});

Inside the handler, the id is used to switch to the appropriate action:

$body.on('click', '.action', function () {
    switch (this.id) {
        case 'lucky-draw':
            BX.luckyDraw();
            break;
        case 'some-btn':
            // do something...
            break;
        // ...
    }
});

Because IDs must be unique, the author switches to HTML5 custom attributes data-action to label actions, removing the need for a shared class:

<button class="action" data-action="lucky-draw">Lucky Draw</button>
<button class="action" data-action="some-action">Button</button>
<a href="#" class="action" data-action="another-action">Link</a>

Delegated binding now targets [data-action] and extracts the action name:

$body.on('click', '[data-action]', function () {
    var actionName = $(this).data('action');
    switch (actionName) {
        case 'lucky-draw':
            BX.luckyDraw();
            break;
        case 'some-btn':
            // do something...
            break;
        // ...
    }
});

To reduce the bulky switch, the author creates an actionList object mapping names to functions:

var actionList = {
    'lucky-draw': function () { BX.luckyDraw(); },
    'some-btn': function () { /* do something... */ }
    // ...
};
$body.on('click', '[data-action]', function () {
    var actionName = $(this).data('action');
    var action = actionList[actionName];
    if ($.isFunction(action)) action();
});

Adding a new button now only requires extending actionList:

// HTML
$body.append('<a href="#" data-action="more-action">Link</a>');
// JS
$.extend(actionList, {
    'more-action': function () { /* ... */ }
});

Open‑Source Library

The author packages the pattern into a tiny library called Action , exposing action.add() to register actions and action.trigger() to invoke them.

action.add({
    'my-action': function () { /* ... */ }
});
action.trigger('my-action');

Application in CMUI

CMUI, a mobile web UI framework, adopts Action for its components. For example, the dialog component defines a close button with data-action="close-dialog" and registers the handler in CMUI.dialog.init():

CMUI.dialog = {
    template: [
        '<div class="dialog">',
        '<a href="#" data-action="close-dialog">×</a>',
        '<h2><%= data.title %></h2>',
        '<div class="content"><%- data.html %></div>',
        '</div>'
    ].join(''),
    init: function () {
        action.add({
            'close-dialog': function () {
                $(this).closest('.dialog').hide();
            }
        });
    },
    open: function (config) {
        var html = render(this.template, config);
        $(html).appendTo('body').show();
    }
};
CMUI.dialog.init();

When CMUI.dialog.open() is called, the dialog appears with a functional close button without any explicit event‑binding code in the component.

Conclusion

The author hopes the shared journey and the Action library inspire other developers to streamline click‑event handling in their projects.