Недавно пришло вот такое письмо от Jurij Kulikov <...83@inbox.lv>:
Читал ваши уроки по JavaScript на FirstSteps.ru , но не нашел там динамического переопределения юбработчиков соытий! Вот что меня интересует:При нажатии одной и той-же кнопки должны вызываться 3 разных файла. Обработчики переопределяются с помощью тега вида <a href="#" onClick="document.forms[0].but1.onClick=button1()"> Я полазил по просторам нета, и кое чего нашел, но работает оно не коректно... <script language="JavaScript"> <!-- function button1() { window.location.href = "1.htm"; } function button2() { window.location.href = "2.htm"; } function button3() { window.location.href = "3.htm"; } //--> </script> Здесь надо onclick! <form> <input name="but1" type="button" value="Загрузить файл"> </form><p> <a href="#" onClick="document.forms[0].but1.onClick=button1()"> Задать загрузку файла 1 при нажатии кнопки </a><BR> <a href="#" onClick="document.forms[0].but1.onClick=button2()"> Задать загрузку файла 2 при нажатии кнопки </a><BR> <a href="#" onClick="document.forms[0].but1.onClick=button3()"> Задать загрузку файла 3 при нажатии кнопки </a> при данном коде, обработчик не переопределяется, а при нажатие на гиперссылку, сразу запускается обработчик (который надо поставить на кнопку). Объясните почему так происходит, я сколько не искал ошибку не могу найти, ведь вроде все правильно, а работает не коректно!
Раз пришлось тратить время на ответ, то пусть знают все :) Разбираться с вашим кодом я сначала не захотел, и попытался реализовать поставленную задачу самостоятельно. Но вот сейчас, набирая эти строки на клавиатуре похоже я нашел ошибку и в вашем коде. Проверить ее мне конечно сейчас сложно, для этого придется набирать ваш код в файл :)
Но так как я при разработке своего примера придерживался этого правила, то у Вас оно определенно забыто.
Давайте посмотрим что я тут придумал:
<html><body> <script> function noevent() {}; var ehandler = noevent; function buttonclick(){ ehandler(); }; function event1() { document.form1.t.value = "event1 exec"; }; function event2() { document.form1.t.value = "event2 exec"; }; function eventchanger(a) { ehandler = a; }; </script> <form name=form1> <input type=text name=t> <input type=button onclick="buttonclick()" value=Click> <br> <button onclick="eventchanger(event1)">Event 1</button> <input type=button onclick="eventchanger(event2)" value="Event 2"> <br> <a href=# onclick="eventchanger(event1)">Event 1</a> <a href="javascript:eventchanger(event2)">Event 2</a> </form> </body></html>
Честно говоря, JavaScript я не люблю по одной простой причине - код который Вы пишете может не всегда правильно работать на всех браузерах, поэтому чтобы убедиться в работоспособности данного решения пришлось к набору Internet Explorer и Opera скачать и установить дополнительно Mozilla Firefox.
Итак о том, что же все-таки пришлось делать. Это классическая структура подобной программы, если бы Вы разарабатывали ее на Си. Первое, что требуется сделать - оределить пустой обработчик события, т.е. набор из пустой функции и переменной хранящей адрес функции обработчика. Далее определяется набор функций обработчиков, и функция замены обработчика путем присвоения адреса нового обработчика переменной.
Вот как раз в этом переопределении адреса у Вас и затык. Либо у Вас маленький опыт, либо набивали на автоматизме, но Вы похоже забыли ключевое для данного случая правило синтаксиса. Вы вместо event1 набрали event1(), таким образом присвоили не значение адреса функции, а результат ее работы. Таким образом и получается, что Ваш обработчик просто запускается в работу, а не переопределяется событие onclick.
По всей видимости, если Вы исправите эту ошибку, то у Вас тоже все заработает, но если нет, то берите мой код. Его я проверил на всех браузерах, и об этом мы сейчас поговорим.
Не зря я ставил все доступные браузеры, оказывается спектр решений не большой. Вы все должны видеть, что переопределение обработчиков я делаю четырьмя различными способами, чтобы проверить работоспособность всех методов. Так вот оказывается, что Opera и Firefox метод замены обработчика через <button onclick=""> не воспринимают вообще, в то время как в Internet Explorer этот метод работает нормально. Все остальные методы работают везде и имеют право на жизнь, поэтому можете использовать любое в зависимости от того, что Вам требуется по дизайну.
Каюсь, не хотелось отвечать на это письмо, но повторная просьба перетянула чашу весов :) И теперь хочу поблагодарить вас Юра, за то что мне пришлось получить эти знания.