Остров. JavaScript события для групп однотипных объектов.
Настроение было порисовать. Но вообще статья будет не о графике, а о коде.
События JavaScript
Те кто изучал JS знают, что в основном события пишутся внутри тэга как атрибуты и применяются к конкретному элементу. Например:
<div id="someblock" onmouseover="this.backgroundColor='#eee'; onmouseout="this.backgroundColor='#fff' ">-----</div>
Помещая курсор мышки над блоком, цвет его фона меняется на серый. Когда курсор убираем с блока, цвет его фона меняется на белый. Иногда в событии вызывают функцию, которая может сделать событие более функциональным.
Событие можно так же описать только в javascript коде.
- Или вызвать функцию выполняющую действия над объектом:
function MouseOver(){
.........
}
object.onmouseover = MouseOver
- Или создать тут же анонимную функцию и сотворить с объектом всё что хочется:
object.onmouseover = function(){
.........
}
В моём новоиспечённом блоге вы могли заметить меняющие цвет поля ввода. Очень часто начинающие программисты неправильно выбирают события для активирования поля. Они выбирают onclick. Но они забывают, что существует ещё кнопка [TAB], с помощью которой пользователь может переключаться по полям ввода постепенно заполняя форму. Событие onclick это щелчёк мышью. Чтобы изменять фон поля ввода при активации оного, следует использовать событие onfocus, а при деактивации – onblur.
Итак, чтобы всё было ажурно и всем было немножко веселее заполнять форму отправки комментариев, я написал код, который всем полям ввода, существующим на странице добавляет события и соответственно реакцию на эти события:
function add_focus(element){
element.onfocus = function(){
this.style.backgroundColor = "#FFF"
}
element.onblur = function(){
this.style.backgroundColor = "#ebebe4"
}
}
function Input_Live(){
var elements = document.getElementsByTagName("input")
for (i = 0; i < elements.length; i++){
if (elements[i].type == "text" || elements[i].type == "password"){
add_focus(elements[i])
}
}
var elem_txt = document.getElementsByTagName("textarea")
for (i = 0; i < elem_txt.length; i++){
add_focus(elem_txt[i])
}
}
Функция Input_Live(), получает все элементы по тэгам input и textarea, проверяет у тэгов input атрибут type, и если он равен "text" или "password", применяет функцию add_focus() к каждому объекту. Функция add_focus() добавляет к объекту обработку событий onfocus и onblur в качестве анонимных функций.
Обратите внимание: внутри анонимной функции мы можем обращаться к объекту напрямую через this. Это очень удобно.
Ну и осталось всего лишь запустить функцию Input_Live(). Это можно сделать или в body:
<body onload="Input_Live()">
Или в самом конце html-шаблона (если для Wordpress, то это footer.php) написать:
<script type="text/javascript">
<!--
getElements()
// -->
</script>
Кстати, пока статья не закончилась, хочу задать вопрос: Кто как делает дебаг? Я имею в виду получение значения функции или переменной или свойства объекта в JavaScript?
Я, например, делаю так:
У меня две функции:
- Первая почти имитирует оператор echo в php:
function echo(str){
document.write(str)
}
В нужном месте вызываем:
echo (something);
-
Вторая почти такая же, только помещает вывод в указанный объект:
function echoIn(obj, str){
var obj = document.getElementById(obj)
obj.innerHTML += str
}
И вызывается так:
echoIn ("obj_id", something)
где, obj_id - id элемента в который мы хотим вывести результат.
Поделитесь своими секретами. ))
]]>Юлечка]]>Картинка красивая… Очень красивая… =)))
»]]>Игорь]]>говорят в Aptana и Firebug есть настоящий дебаггер, но я никогда не пользовался. Либо пользуюсь алертом, либо нашей “умной ф-ей DUMP, которая красивенько показывает нужные данные в абсолютно спозиционированном диве.
»]]>Никита]]>Вот, насчёт дива, это зачётно.
»]]>Russel]]>Я юзаю firebug, там есть консоль, куда можно писать всё что хочется. Например console.log(a) выведет значение. Синтаксис точно такой же, как и при выводе в alert.
»