Лучшие практики по добавлению слушателей событий (javascript, html)

Я знаю, что, возможно, я спрашиваю о луне здесь, но я ищу некоторые опытные мнения о том, как лучше всего добавить слушателей событий или, скорее, "Когда" или "Где", чтобы добавить их в файл js.

Возьмите мой пример. У меня есть страница с кучей событий onclick, которые теперь должны обрабатываться свойствами в файле JS

например

var test = document.getElementById("i-am-element");
test.onclick = testEventListener;

Мой вопрос, где именно я должен добавить это в JS-файл.

Как я планировал это сделать, чтобы у меня было что-то вроде следующего

$(document).ready(function() {
    var test = document.getElementById("test-me-shane");
    test.onclick = testEventListener;

    //add all the functions to different elements
});

myfunction1(){}
myfunction2(){}
myfunction3(){}

Чтобы документ был готов, только тогда добавляются все прослушиватели событий. Это приемлемо или есть более общепринятый способ сделать это.

ПРИМЕЧАНИЕ. Я знаю, что этот вопрос может показаться субъективным, поэтому правильный ответ будет самым популярным способом, которым вы видели добавленных слушателей событий. Я уверен, что это должно быть одобрено большинством, и я заранее прошу прощения, если это похоже на то, где вы должны объявлять переменные, в начале или когда они вам нужны.

В Java, переменные должны быть объявлены в верхней части функции, или как они необходимы?

Источник

2 ответа

Решение

Вы действительно хотите иметь возможность добавлять всех слушателей событий в одном месте; Зачем? Просто для удобства обслуживания.

Поэтому лучшее место для размещения всех ваших слушателей событий - это место, где вы можете гарантировать доступность всех элементов, с которыми вы, возможно, захотите связать обработчики событий.

Вот почему наиболее распространенное место для привязки ваших обработчиков событий - после DOMReady событие произошло $(document).ready(),

Как всегда, есть некоторые исключения из правила. Иногда вам может понадобиться привязать обработчик события к элементу, как только он станет доступен; который после закрывающего тега элемента был определен. В этом случае следует использовать следующий фрагмент:

<div id="arbitrary-parent">
    <h1 id="arbitrary-element">I need an event handler bound to me <strong>immediately!</strong></h1>
    <script>document.getElementById("arbitrary-element").onclick = function () { alert("clicked"); }</script>
</div>

Другая вещь, которую вы должны рассмотреть, это то, как вы собираетесь связывать свои обработчики. Если вы придерживаетесь: DOMElement.onclick = function () { }; Вы ограничиваете себя привязкой к обработчику для каждого события.

Вместо этого следующий подход позволяет связывать несколько обработчиков для каждого события:

function bind(el, evt, func) {
    if (el.addEventListener){
        el.addEventListener(evt, func, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evt, func);
    }
}
Источник

Есть ли конкретная причина, по которой вы не просто указываете связь при объявлении элемента в HTML
<someTag id="i-am-an-element" onclick="functionToTheEventToExecute()"> </someTag>
Полагаю, что так.

Источник
Другие вопросы по тегам