Хорошо себя ведет DHTML: тематическое исследование

 <style type="text/css">  label.dynamic {    display:none;    }  </style> 

Вторая задача, по сути, требует, чтобы мы перебрали все элементы меток на странице, проверили, имеют ли они правильный класс, и, если они есть, добавили обработчики событий в связанные поля. Мы также должны сохранить копию текста метки в свойстве поля для легкого доступа и инициализировать отображение метки, пока мы здесь.

Это требует определенных знаний об объектной модели документа. Если вы ржавеете в деталях или никогда не уделяли времени изучению, вы можете освежиться в W3C . Поставщики браузеров также часто имеют хорошие ресурсы (например, Microsoft и Mozilla ), хотя они явно склоняются к своим собственным реализациям.

В идеальном мире, когда мы узнали, как работает DOM, мы могли бы использовать следующий код для выполнения нашей задачи. Он использует getElementsByTagName методы getElementById , а также свойство className . Каждый из них определен в DOM Level 1 .

Этот код также использует метод addEventListener из DOM Level 2 Events .

 n setupLabels() {  // get all the labels on the entire page  var objLabels = document.getElementsByTagName("LABEL");  var objField;   for (var i = 0; i < objLabels.length; i++) {    // if the label is supposed to be dynamic...    if ("dynamicLabel" == objLabels[i].className) {      // get the field associated with it      objField = document.getElementById(objLabels[i].htmlFor);      // add event handlers to the onfocus and onblur events      objField.addEventListener("focus", focusDynamicLabel, false);      objField.addEventListener("blur", blurDynamicLabel, false);      // save a copy of the label text      objField._labelText = objLabels[i].firstChild.nodeValue;      // initialize the display of the label      objField.value = objField._labelText;    }  }  } 

Однако этот код не будет работать для IE / Windows, потому что он не полностью совместим с DOM; он не поддерживает модуль событий DOM Level 2. Вместо этого он поддерживает собственный интерфейс, который делает то же самое. Поскольку IE / windows имеет такую ​​огромную пользовательскую базу — и мы хотели бы видеть наш эффект — мы добавили небольшой хак в наш скрипт, чтобы приспособить его к другой объектной модели (обратите внимание, что измененные строки выделены жирным шрифтом):

 function setupLabels() {  // get all the labels on the entire page  var objLabels = document.getElementsByTagName("LABEL");  var objField;   for (var i = 0; i < objLabels.length; i++) {    // if the label is supposed to be dynamic...    if ("dynamicLabel" == objLabels[i].className) {      // get the field associated with it      objField = document.getElementById(objLabels[i].htmlFor);      // add event handlers to the onfocus and onblur events  addEvent(objField, "focus", focusDynamicLabel);      addEvent(objField, "blur", blurDynamicLabel);      // save a copy of the label text      objField._labelText = objLabels[i].firstChild.nodeValue;      // initialize the display of the label      objField.value = objField._labelText;    }  }  }   function addEvent(objObject, strEventName, fnHandler) {  // DOM-compliant way to add an event listener    if (objObject.addEventListener)    objObject.addEventListener(strEventName, fnHandler, false);  // IE/windows way to add an event listener    else if (objObject.attachEvent)    objObject.attachEvent("on" + strEventName, fnHandler);  } 

Мы можем запустить этот скрипт после загрузки страницы, подключив его к событию onload с помощью той же самой служебной функции.

 addEvent(window, "load", setupLabels); 

Теперь все, что нам нужно сделать, это реализовать focusDynamicLabel и blurDynamicLabel . Это просто — это как оригинальный код из нашего первого скрипта динамической метки. Единственное отличие состоит в том, что он должен быть обобщен, чтобы одна и та же функция работала для каждой динамической метки на странице.

В полностью совместимом с DOM браузере мы могли бы использовать свойство target объекта события (также определенного в событиях уровня 2 DOM ), чтобы получить ссылку на элемент, вызвавший событие, и манипулировать им:

 function focusDynamicLabel(event) {  // get the form field that fired this event  var elm = event.target;  // if it is currently displaying the label...  if (elm._labelText == elm.value) {    // ... turn it off    elm.value = "";  }  }   function blurDynamicLabel(event) {  // get the form field that fired this event  var elm = event.target;  // if it's empty...  if ("" == elm.value) {    // ... display the label text    elm.value = elm._labelText;  }  } 

Но опять же, IE / windows реализует эту функциональность немного по-другому , используя свойство srcElement вместо стандартизированной target и делая объект события доступным через window.event вместо стандартного способа неявной передачи его функциям-обработчикам событий.

Нам понадобится еще одна небольшая хакерская и вспомогательная функция:

 function focusDynamicLabel(event) {  // get the form field that fired this event    var elm = getEventSrc(event);  // if it is currently displaying the label...  if (elm._labelText == elm.value) {    // ... turn it off    elm.value = "";  }  }   function blurDynamicLabel(event) {  // get the form field that fired this event    var elm = getEventSrc(event);  // if it's empty...  if ("" == elm.value) {    // ... display the label text    elm.value = elm._labelText;  }  }   function getEventSrc(e) {  // get a reference to the IE/windows event object    if (!e) e = window.event;   // DOM-compliant name of event source property    if (e.target)    return e. target;  // IE/windows name of event source property    else if (e.srcElement)    return e.srcElement;  } 

Пример C показывает нашу работу до сих пор.

 function setupLabels() {  // get all the labels on the entire page  var objLabels = document.getElementsByTagName("LABEL");  var objField;   for (var i = 0; i < objLabels.length; i++) {    // if the label is supposed to be dynamic...    if ("dynamicLabel" == objLabels[i].className) {      // get the field associated with it      objField = document.getElementById(objLabels[i].htmlFor);      // add event handlers to the onfocus and onblur events      addEvent(objField, "focus", focusDynamicLabel);      addEvent(objField, "blur", blurDynamicLabel);      // save a copy of the label text      objField._labelText = objLabels[i].firstChild.nodeValue;      // initialize the display of the label      objField.value = objField._labelText;    }  }   // for each form in the document, handle the onsubmit event with the  // resetLabels function    for (var i = 0; i < document.forms.length; i++) {    addEvent(document.forms[i], "submit", resetLabels);  }  } 

 function resetLabels(event) {  var elm = getEventSrc(event);  // get all label elements in this form  var objLabels = elm.getElementsByTagName("LABEL");  var objField;   for (var i = 0; i < objLabels.length; i++) {    // if the label is dynamic...    if ("dynamicLabel" == objLabels[i].className) {      // get its associated form field      objField = document.getElementById(objLabels[i].htmlFor);      // if the field is displaying the label, reset it to empty string      if (objField._labelText == objField.value) {        objField.value = "";      }    }  }  } 

 function supportsDynamicLabels() {  // return true if the browser supports getElementById and a method to  // create event listeners  return document.getElementById &&    (window.attachEvent || window.addEventListener);  } 

 if (supportsDynamicLabels()) {  document.writeln('<style type="text/css">');  document.writeln('label { display:none; }');  document.writeln('</style>');  }  

 if (supportsDynamicLabels()) {  document.writeln('<style type="text/css">');  document.writeln('label { display:none; }');  document.writeln('</style>');   addEvent(window, "load", setupLabels);  } 

 function supportsDynamicLabels() {  return    document.getElementById &&    (window.attachEvent || window.addEventListener) &&  null == navigator.appVersion.match(/Safari/d+$/);  }