Простой способ вызова js-функций по событиям

Если нам нужно вызвать функцию по какому-либо событию, мы можем делегировать действие. Когда речь идёт о простом 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>

Таким образом, мы можем добавлять любое количество элементов и не беспокоиться о связи их событий с функциями, достаточно посмотреть на атрибут действия, чтобы узнать, какая функция запустится.