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

[Pedro Garciya Lopez]

Ребята, помогите!

Стоит задача сделать конструктор галерей. Работает это так:
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?

[рони]

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

[danik.js]

в идеале хочется сделать так как подвязываются некоторые 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]

возможно вы меня не поняли, или скорее всего я не правильно объяснил.
вот так например инициализируется редактор 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]

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

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

[danik.js]

вот так например инициализируется редактор Elrte

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

[Pedro Garciya Lopez]

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