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

Question

Я знаю, что, возможно, я спрашиваю о луне здесь, но я ищу несколько опытных мнений о том, как лучше всего добавить слушателей событий, а точнее, «Когда» или «Где», чтобы добавить их в файл 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 переменные объявляться в верхней части функции или по мере необходимости?

Answer 1

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

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

Именно по этой чаще всего связываются ваши обработчики событий после того, как событие 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);
    }
}

Answer 2

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