Javascript и AJAX. Изучение языков и web-технологий Javascript и AJAX. Изучение языков и web-технологий

Рабочий конспект изучения языков и web-технологий: Javascript и AJAX

 
Мистический роман
БЛИЗКАЯ ДАЛЬ
Татьяны Катушонок

Купить в магазинах:
Близкая даль
Близкая даль
Близкая даль
Близкая даль
Близкая дальБлизкая даль
Озарение души
Сборник стихов Татьяны Катушонок
Осознание красоты спасет мир
Web technologies and programming languages
Web технологии и языки
PHP
Изучаем PHP
Клиент-сервер
XML - XSLT
Изучаем XML
Преобразования
HTML
Изучаем HTML
Теги
Javascript и AJAX
Три кита
Основы языка
DOM
Прогулка по DOMу
Events and Listeners
Список событий
Events in JQuery
Google JQuery
Новый синтаксис JQuery
Selectors
Слайд-шоу

Примеры jQuery
All Selector(*)
:animated Selector




5.1 Events in JQuery
четверг
Просто рабочий конспект
Собственно говоря, один раз разобраться с различием моделей стандарта W3C и MS IE полезно, безусловно. Один раз. Но всё время выполнять эти проверки и лепить свои функции - не рационально.
JQuery делает всё это просто замечательно!  Берёт на себя все заботы по различию браузеров.
Надо просто воспользоваться библиотекой - и вперёд!

$(document).ready() event handler.
Выполняет функции встроенного события onload .

Однако window.onload срабатывает, когда документ полностью загружен. Т.е., каждый html-элемент на странице доступен для javascript.

$(document).ready() срабатывает, когда DOM готов к использованию, не ожидая загрузки связанных файлов (например, картинок).
window.onload можно присвоить только один обработчик. Каждый новый заменяет предыдущий.

Напротив, механизм $(document).ready() организует очередь вызовов обработчиков в порядке их регистрации.

Эквивалентные сокращения  для $(document).ready() :
                    $().ready(function() { ...наш код ...});
или               $(function() { ...наш код ...});

Впрочем, придется немного вернуться назад - к кирпичикам JQuery.

Ярлыки:

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 00:43   0 comments
4.2 Список событий
среда
Просто рабочий конспект
Для заметки.
Список кросс-платформенных рекомендуемых событий Javascript:
  • blur
  • change
  • click
  • dblclick
  • error
  • focus
  • keydown
  • keypress
  • keyup
  • load
  • mousedown
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • resize
  • scroll
  • select
  • submit
  • unload 

Ярлыки: ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 01:15   0 comments
4.1 Events and Listeners
Просто рабочий конспект
Listener – обработчик, наблюдающий за конкретным событием. Перевод не дает приемлемого понятия: слушатель,слухач, жучок...
Оставляем просто листенер.
Event handler – обработчик события (функция)
Привязка обработчика к событию:

element.onevent = eventHandler;

Например,
var link = document.getElementById("myLink");
link.onclick = myLink.clickHandler;

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

Default actions(действия по умолчанию).
Например:
  •  браузер следует по кликнутой ссылке,
  •  сабмитит форму при нажатии кнопки submit или  enter в форме,
  •  перемещает keyboard focus при нажатии tab

Отмена  default action  – возврат false.

var myLink = { clickHandler: function() {
    return confirm("Are you sure you want to leave this site?");}
};}

Функция confirm (аналог alert) возвращает true при нажатии Ok и false при нажатии Cancel..
Эти ф-ции встроены в браузер!!!

Event handler может обрабатывать события для нескольких элементов!
Используется ключевое слово this.

Например, открывать все линки в новом окне:

clickHandler: function() {
    open(this.href);
    return false;
}

При вызове метода объекта object.method() внутри кода этого метода ключевое слово this относится к данному объекту.
Можно выделить только часть линков в класс external.

var externalLinks = {
init: function(){
var extLinks = Core.getElementsByClass("external");
for (var i = 0; i < extLinks.length; i++) {
   extLinks[i].onclick = externalLinks.clickHandler;
}
},
clickHandler: function() {
open(this.href);
return false;
}};

Для конкретного события в привязке к конкретному html-элементу можно назначить только один обработчик .

А по жизни - нужно несколько. Например, при обработке полей формы кнопке submit нужно назначить разные обработчики проверки корректности данных.

Ограничение обходится с помощью event listeners.
W3C:
element.addEventListener("event", eventListener, false);
element.removeEventListener("event", eventListener, false);

MS IE опять выделилась:
element.attachEvent("onevent", eventListener);
element.detachEvent("onevent", eventListener);

Отмена default actions:
W3C: метод preventDefault(),
Модель событий MS – объект event не передаётся листенеру , а доступен через глобальный объект event со свойством returnValue вместо метода:
event.returnValue = false;

Различение браузеров – способом проверки объекта typeof.
clickListener: function(event) {
   if (typeof event == "undefined") {
          event = window.event;
   }
   if (!confirm("Are you sure you want to leave this site?"))  {
        if (typeof event.preventDefault != "undefined") {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
     }}}

Распространиение событий в ДОМе. 3 фазы:
  1. capture (нет в MS IE)
  2. target
  3. bubling
Во время фазы capture событие продвигается по ДОМу начиная с document, html, body вплоть до элемента и на каждом этапе проверяет наличие capture event listener для этого типа события. Если есть такой - запускается.  Тип листенера задаётся 3-м параметром true/false. Этот параметр отсутствует в MS IE, поскольку в схеме MS нет 1-й фазы.

На 2-й фазе target запускается листенер элемента.
На 3-й фазе bubling событие перемещается вверх по ДОМу и на каждом шаге запускается (если есть) not capturing event listener.

Отмена фазы bubling:
W3C:    event.stopPropagation();
MS IE:  event.cancelBubble = true; 


КликниZoom-in button или Zoom-out button чтобы увеличить/уменьшить изображение...

Ярлыки: , , , , ,

Подпишись на новости Javascript и AJAX по e-mail
posted by Sergey @ 00:55   0 comments
Близкая даль
Подпишись на новости Javascript и AJAX письмом:

Напишите ваш e-mail :

Delivered by FeedBurner

Предыдущий пост
Архив
Линки
Статистика

Subscribe in a reader

Powered by FeedBurner

BLOGGER

© Javascript и AJAX. Изучение языков и web-технологий