Если нам нужно вызвать функцию по какому-либо событию, мы можем делегировать действие. Когда речь идёт о простом js, это можно сделать при помощи onclick
<button onclick="runFunction()">Action button</button>
В случае, если мы используем jQuery и хотим большей динамичности кода, мы можем использовать простое решение: название функции заключать в data-*
атрибут. Далее нужно будет только создать функцию, которая должна запускаться при клике на нужном элементе, а свяжет их этот код:
// обрабатываем все объекты с data-action $("[data-action]").click(function(e){ // запрещаем событие по умолчанию e.preventDefault(); // узнаём название функции var func_name = $(this).attr("data-action"); // если функция существует, запускаем её // в качестве параметра передаём элемент, на котором было событие typeof window[func_name] === "function" && window[func_name]( $(this) ); });
Создаём нужную функцию:
function function_name(e){ // stuff... }
Кнопка (ссылка, изображение, да вообще любой объект) будет выглядеть так:
<a href="#some_action" data-action="function_name">Click me!</a>
Таким образом, мы можем добавлять любое количество элементов и не беспокоиться о связи их событий с функциями, достаточно посмотреть на атрибут действия, чтобы узнать, какая функция запустится.
Беда только в том, что эта штука будет засорять глобальную область видимости, что не есть айс.
Нужно выбрать: не испольовать глобальные переменные и писать обработчик для всех или некоторых событий отдельно, либо использовать глобальную область видимости.