Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   один обработчик для всех элементов определенного класса (https://javascript.ru/forum/events/39596-odin-obrabotchik-dlya-vsekh-ehlementov-opredelennogo-klassa.html)

Pedro Garciya Lopez 05.07.2013 01:16

один обработчик для всех элементов определенного класса
 
Ребята, помогите!

Стоит задача сделать конструктор галерей. Работает это так:
1. на страницу загружаются изображения <img>
2. на каждом изображении можно курсором выделить квадратную область, которая в последствии станет превью.
3. после выделения всех областей жмешь ОК и едешь дальше

обработчик который все это проделывает с одним изображением я сделал, но изображений много, они будут подгружаться динамический, а он у меня пока подвязывается следующим образом:
var image = document.getElementById('image1');
image.onmousedown = function() {
//обработчик
}

можно ли как-то заставить его работать для всех <img> заданного класса?
<img class="imageCut" src="IMG_001.jpg" /><br />
<img class="imageCut" src="IMG_002.jpg" /><br />
<img class="imageCut" src="IMG_003.jpg" /><br />
.....

в идеале хочется сделать так как подвязываются некоторые WYSIWYG-редакторы: инициализируешь его в начале, а потом просто для всех <textarea> задаешь класс class="editor1" и они заменяются редактором.

Буду благодарен за советы, короткие примеры и вообще подскажите в какую сторону копать? И можно ли в этом случае обойтись без jQuery?

рони 05.07.2013 01:23

Pedro Garciya Lopez,
http://learn.javascript.ru/event-delegation

danik.js 05.07.2013 19:21

Цитата:

Сообщение от Pedro Garciya Lopez
в идеале хочется сделать так как подвязываются некоторые WYSIWYG-редакторы: инициализируешь его в начале, а потом просто для всех <textarea> задаешь класс class="editor1" и они заменяются редактором.

Такого не бывает. Если задать класс после инициализации редактора то никакого эффекта не будет. Ибо отслеживать изменения классов в js довольно накладно.


В вашем случае либо делегировать обработку события родительскому элементу, либо можно еще так (если элементов не тысячи):
var handler = function() {
//обработчик
};
var images = document.querySelectorAll('.imageCut');
for (var i = 0, image; image = images[i]; i++)
    image.onmousedown = handler;

Pedro Garciya Lopez 05.07.2013 20:19

возможно вы меня не поняли, или скорее всего я не правильно объяснил.
вот так например инициализируется редактор Elrte:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
	

	    <link rel="stylesheet" type="text/css" href="tools/editor/css/elrte.min.css">
	    <script src="tools/editor/js/elrte.min.js"></script>
	    <script src="tools/editor/js/i18n/elrte.ru.js"></script>
	    
	    <script>
			$().ready(function() {
				$('.editor').elrte({
					cssClass : 'el-rte',
					lang     : 'ru',
					width    : 800,
					height   : 450,
					toolbar  : 'maxi'
				});
			});
		</script>


потом все <textarea> классом editor заменяются на Elrte
<textarea class="editor">


здесь правда jQuery

vadim5june 05.07.2013 20:36

Цитата:

Сообщение от Pedro Garciya Lopez
они будут подгружаться динамический

там где они динамически подгружаются на каждую картинку cтавьте свой обработчик onmousedown

danik.js 05.07.2013 20:46

Цитата:

Сообщение от Pedro Garciya Lopez
вот так например инициализируется редактор Elrte

Тут навешивается обработчик события DOMContentLoaded, которое происходит в момент окончания загрузки HTML-документа, поэтому инициализация происходит после, а не до.

Pedro Garciya Lopez 05.07.2013 21:39

воот, это как раз то что нужно в моем случае. спасибо за подсказку


Часовой пояс GMT +3, время: 05:47.