Статьи

Удаление встроенного Javascript и использование Mootools addEvent ()

Март 24, 2019

Javascript позволяет нам запускать программную логику на стороне клиента, то есть мы можем динамически изменять HTML-элементы на основе некоторой логики без перезагрузки страницы с новым вызовом сервера. Эта логика запускается событиями, которые запускаются из взаимодействия с пользователем. Обычный способ сделать это — добавить встроенные события Javascript , но я бы хотел искоренить это зло из Интернета.

<a href=”javascript:doStuff()”>Do Stuff</a>

<form onsubmit=”doStuff()”>

Оба примера являются распространенными способами включения сценариев клиент-сайт, которые имеют место, когда пользователи взаимодействуют со ссылками или кнопками. И у обоих способов есть лучшая альтернатива.

Встроенный Javascript - это зло

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

  1. Обслуживание: если вы изменяете имя функции или параметры, вам нужно будет обновлять каждый вызов этой функции. Что отстой, если у вас много кнопок.
  2. Модульность. Как и в случае с отдельным CSS, имеет смысл содержать как можно больше Javascript. Нет необходимости смешивать границы, смешивая HTML и Javascript.
  3. Доступность. Требуя, чтобы Javascript был частью действия, такого как hrefкнопка привязки, вы сделали невозможным работу с Javascript. Если оставить его в HTML-версии, он будет работать, если Javascript отключен.
  4. Конфиденциальность: это может быть личным предпочтением. Но я не люблю передавать свои функции Javascript пользователю. Встроенный способ покажет, что происходит вызов Javascript в строке состояния. Конечно, если кто-то копает достаточно сильно, он узнает, но, по крайней мере, я не голый.

Добавление событий с помощью Mootools

Прежде всего, очень легко добавить прослушиватели событий в объекты DOM с помощью Mootools. Вы просто получаете доступ к элементу DOM и используете addEvent()функцию. Вот как:

Лечение

$('button').addEvent('click',function(event){
	event.stop();
	alert("Doing stuff");
});
<a href="dostuff.html" id="button">Do Stuff</a>

Это получает DOM Элемент ID кнопки. Функция addEvent()принимает 2 параметра, первый из которых относится к типу события, в этом случае щелчок , а второй — функция, выполняемая при прослушивании этого события.

Используя, event.stop()мы предотвратили обычное действие, которое должно было бы загрузить dostuff.html (хорошо иметь доступность, поэтому в случае, если Javascript нет рядом, чтобы остановить событие, он переходит к dostuff.html).

.bind () и .each ()

Вот две дополнительные функции, которые очень полезно знать при добавлении прослушивателей событий в элементы.

Array.each ()

Во-первых, это .each()делает чрезвычайно простым добавление этой широкой страницы. Давайте взглянем.

<a href="dostuff.html" class=”butto>Do Stuff</a>
$$(’.button’).each(function(stuffButton) {
	stuffButton.addEvent(’click’,function(event){
		event.stop();
		alert(”Doing stuff”);
	});
});

Здесь $$('.className')мы использовали массив элементов DOM, все с классом кнопки . Затем, используя Array.each()функцию Mootools , мы перебираем каждый объект в массиве и обращаемся к нему, используя передаваемый нами параметр, в данном случае stuffButton .

Function.bind ()

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

Чтобы использовать thisключевое слово обратно в свой контроль, вы будете использовать bind()функцию.

$$('.button').each(function(stuffButton) {
	stuffButton.addEvent('click',function(event){
		event.stop();
		this.doStuff();
	}.bind(this));
});

Вы можете использовать любой объект в качестве параметра bind(), делая этот объект доступным с this.

События для Mootoolize

Вот небольшой список общих встроенных событий Javascript, которые вы можете прослушивать addEvent. Просто уберите « вкл» и оставьте остальное слово.

  • по щелчку
  • onSubmit
  • onMouseOver — Полезно редко. Обычно CSS-псевдо-класс :hover— это правильное использование.
  • onKeyPress — думаю. Если это не годный для использования встроенный, по крайней мере keypress, это событие, которое вы можете прослушать.

39
Share: