Иногда событие нужно вызвать только один раз на вашей странице. Например, щелкнув миниатюру, которая загружает и воспроизводит видеофайл, или щелкнув значок «еще», который извлекает и отображает дополнительный контент через Ajax. Однако вы, вероятно, определили обработчик событий, который вызывается каждый раз, когда происходит действие. В лучшем случае, это немного неэффективно, и браузер сохраняет ненужные ресурсы. В худшем случае ваш обработчик может сделать что-то неожиданное или перезагрузить данные, которые уже доступны.
К счастью, создать одноразовые обработчики событий в JavaScript относительно просто. Процесс:
- Обработчик назначается событию, такому как нажатие на элемент.
- При щелчке по элементу запускается обработчик.
- Обработчик удален. Дальнейшее нажатие на этот элемент больше не вызывает функцию.
JQuery
Давайте сначала посмотрим на самое простое решение. Если вы используете jQuery, есть малоизвестный метод привязки события one() который реализует одноразовые события.
$("#myelement").one( "click", function() { alert("You'll only see this once!"); } );
Он используется идентично другим методам событий jQuery. Для получения дополнительной информации см. Api.jquery.com/one/ .
Самовосстанавливающиеся погрузчики
Если вы используете сырой JavaScript, любая функция-обработчик может удалить себя, используя одну строку кода:
document.getElementById("myelement").addEventListener("click", handler); // handler function function handler(e) { // remove this handler e.target.removeEventListener(e.type, arguments.callee); alert("You'll only see this once!"); }
Предполагая, что ваш аргумент события обработчика называется ‘e’, строка:
e.target.removeEventListener(e.type, arguments.callee);
удалит обработчик при первом его вызове. Неважно, какой тип события или имя вы используете для своего обработчика — это может быть даже встроенная анонимная функция.
Обратите внимание, что я использовал стандартные вызовы событий, которые не будут работать в IE8 и ниже. OldIE требует вызова detachEvent а тип требует префикс «on», например, «onclick». Но, если вы поддерживаете oldIE, вы, вероятно, используете jQuery или свой собственный обработчик событий.
Самостоятельно удаляемые обработчики могут быть лучшим вариантом, если вам требуется некоторая гибкость, например, вы хотите отсоединять только определенные типы событий или удалять обработчик после различных условий, например, двух или более щелчков.
Функция создания одноразовых событий
Как и я, вы можете быть ленивым или забывчивым, чтобы добавить строку удаления события в каждую функцию обработчика. Давайте создадим onetime функцию, которая сделает за нас тяжелую работу:
// create a one-time event function onetime(node, type, callback) { // create event node.addEventListener(type, function(e) { // remove event e.target.removeEventListener(e.type, arguments.callee); // call handler return callback(e); }); }
Теперь мы можем использовать эту функцию всякий раз, когда нам требуется одноразовое событие:
// one-time event onetime(document.getElementById("myelement"), "click", handler); // handler function function handler(e) { alert("You'll only see this once!"); }
Хотя вам не потребуются одноразовые события на каждой странице, хорошо, что есть несколько вариантов, доступных для разработчиков JavaScript.