Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

Добавление события

Работает примерно так же, как и Element.addEvent, с тем отличием, что позволяет использовать пользовательское событие “domready”.

window.addEvent(''load'', function(){...});

window.addEvent(''domready'', function(){...});

function myFunction(){...};
window.addEvent(''domready'', myFunction);

domready

Это важный нюанс! Всегда, когда вы пытаетесь обратится к элементам DOM-а, эти элементы должны быть уже загружены в браузер. Если у вас имеется такой код:

$$(''a'').each(function(link){

  link.setStyle(''color'',''blue'');
});

то можно сказать, что он будет работать только тогда, когда все теги a будут загружены в браузер. Поэтому, если установить этот код во внутрь тега head, он ничего не сделает. Если установить его в середину вашего документа, он задействует все ссылки загруженные до момента запуска скрипта.

Чтобы обойти это, код нужно запустить после того, как загрузится страница целиком. Тут есть несколько вариантов. Можно использовать window.addEvent(“load”, function(){…. код скрипта …});. Однако следует заметить, что
событие “load” ожидает пока всё, включая изображения, CSS файлы и остальное, подгрузится.

Вот для чего необходимо событие “domready“. Это событие срабатывает тогда, когда будет загружен только весь HTML код, даже если все остальное (изображение и другие файлы) еще не загрузились. Потому код

window.addEvent(''domready'', function(){
  $$(''a'').each(function(link){

    link.setStyle(''color'',''blue'');
  });

});

сработает как только весь HTML загружен в браузер, а все ссылки из нашего первого примера станут синими.

В дополнение, хочу сказать, что использование события domready я встречал пока только в Mootools, но так как это событие пользовательское, это не удивительно. Еще вроде у jQuery есть аналог:

      $(document).ready(function() {
          // сюда вставляется код функции

      });

но при этом, кажется, такое написание в jQuery уже устарело, т.к. в одном из обновлений разработчики убрали необходимость указывать метод .ready(), так как весь код jQuery, в любом случае, будет запускаться только когда все элементы DOM-а будут загружены в кэш браузера. Я б с удовольствием написал еще пару статеек и о jQuery, как это сделал мой предшественник, в посте об AJAX, но сделаю это только после того, как закончу серию уроков о Mootools.