Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите разобраться в коде (https://javascript.ru/forum/jquery/41946-pomogite-razobratsya-v-kode.html)

Nailya 06.10.2013 14:59

Помогите разобраться в коде
 
Всем привет!

У меня есть вот такой код:

$('body').on('click', '.trigger', function(e){ 
	e.preventDefault();
	$('#test-modal').modal().open();


Вопрос! зачем перед preventDefault() использовать параметр e

danik.js 06.10.2013 17:38

Беда, беда...
Ок. Зачем перед .on(...) использовать $('body') ?
Зачем перед .modal() использовать $('#test-modal')? Зачем перед .open() использовать $('#test-modal').modal()?

preventDefault - это свойство объекта e (его метод).
Если быть точнее - это свойство прототипа объекта e (который ссылается на Event.prototype).

Nailya 06.10.2013 18:14

вот код, в котором я пытаюсь разобрать логику открытия модального окна
jQuery(function($){ //jQuery - эти озночает, что дальше идет код jQuery; $ в данном контексте - переменная
			// bind event handlers to modal triggers
		
			$('body').on('click', '.trigger', function(e){ //$() - начало использования скрпта jQuery, параметр $() - ссылка на контейнер html, .on() - вызов некого события, "click" - тип вызываемого события, ".trigger" - идентификатор объекта, к которому применяется событие,function() - это фукция, которая выполняется в случае возникновения события.
				e.preventDefault();//метод preventDefault() отменяет стандартную реакция на событие 
				$('#test-modal').modal().open();//modal().open(); - открывает модальное окно, описанную в контейнере с идентификатором #test-modal
			});

			// attach modal close handler
			$('.modal .close').on('click', function(e){
				e.preventDefault();
				$.modal().close();
			});

			// below isn't important (demo-specific things)
			$('.modal').on('click', function(e){
				e.stopPropagation();
				$('.modal').toggle();
			});
		});


<body>
	<div class="modal" id="test-modal" style="display: none">
			<a href="#" class="close">&times;</a>

			<object class="Clip">
				<param value="Belissimo.swf" name="movie">
				<embed src="Belissimo.swf">
			</object>
	</div>				
		 
		  <a href="#" class="trigger">Open modal</a>
</body>


Не понятно, что такое объект е в данном контексте?

danik.js 06.10.2013 20:25

В функцию-обработчик события передается объект. e - это сокращение от event.
Сделайте console.log(e) да посмотрите какие свойства имеет этот объект.
Например для событий мыши в объекте можно найти координаты x/y, элемент, на котором возникло событие, номер кнопки мыши, которую нажали, состояние кнопок-модификаторов (Ctrl, Shift, Alt) методы stopPropagation, preventDefault и тд. Стоит заметить что jQuery передает свой объект, не нативный - в целях достижения кроссбраузерности. Но также есть и ссылка на нативный объект e.originalEvent, доступ к которому обычно не требуется.

Nailya 07.10.2013 09:49

понятно) danik.js, спасибо за разъяснения


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