|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Работа со сценариями — обработчиками событий  

Работа со сценариями — обработчиками событий

Оглавление
Работа со сценариями — обработчиками событий
Страница 2
Страница 3
Страница 4
Страница 3 из 4

Далее Web-обозреватель перенаправит событие в элемент страницы, в который вложена форма, т. е. в тело страницы. И обработчик события onclick, что привязан к форме, будет выполнен. И, поскольку тело страницы — самый верхний элемент в иерархии, здесь событие прекратит свое существование.

Событие как бы "всплывает" от элемента страницы, в котором оно наступило, в самый верхний элемент иерархии — тело страницы. При этом все обработчики этого события во всех элементах страницы, по которым "следует" событие, будут выполнены.

Пример

Вот фрагмент HTML-кода Web-страницы, в которой используется единый обработчик события onclick для всех кнопок:

<HEAD>

<SCRIPT TYPE="text/javascript">

// Объявление "универсального" обработчика событий function eventHandler() {

// Тело "универсального" обработчика события } </SCRIPT> </HEAD> <BODY>

<FORM ONCLICK="eventHandler();">

<INPUT TYPE="button" ID="btnl" VALUE="Кнопка 1"> <INPUT TYPE="button" ID="btn2" VALUE="Кнопка 2"> <INPUT TYPE="button" ID="btn3" VALUE="Кнопка 3"> </FORM> </BODY>

Как из обработчика события получить доступ к элементу страницы, в котором наступило это событие?

Проблема

Я хочу привязать одну и ту же функцию-обработчик к событиям сразу нескольких элементов управления. Как мне получить доступ к элементу страницы, в котором наступило событие, из тела функции-обработчика?

Решение 1

Самое очевидное и универсальное решение— это передать в функцию-обработчик экземпляр объекта, соответствующий элементу страницы, в кото-

ром произошло событие. Проще всего это сделать, использовав ключевое слово this.

Народ предупреждает!

Ключевое слово this в данном случае имеет смысл только в коде JavaScript, что присвоен атрибуту тега элемента, соответствующему событию, в качестве значения. Использовать это ключевое слово в теле функции-обработчика нельзя — это вызовет ошибку.

Пример

<HEAD>

<SCRIPT TYPE="text/javascript"> function btnOKOnClick(sender) {

sender.value = "Нажато"; } </SCRIPT> </HEAD> <BODY> <FORM>

<INPUT TYPE="button" ID="btnOK" VALUE="Нажми!"ONCLICK="btnOKOnClick{this);"> </FORM> </BODY>

Решение 2 (для Microsoft Internet Explorer и Opera)

Использовать свойство srcElement описанного выше объекта event.

Пример

<HEAD>

<SCRIPT TYPE="text/javascript">

function btnOKOnClick() {

event.srcElement.value = "Нажато"; } </SCRIPT> </HEAD> <BODY> <FORM>

<INPUT TYPE="button" ID="btnOK" VALUE="Нажми!"ONCLICK="btnOKOnClick();">

<INPUT TYPE="button" ID="btnCancel" УАШЕ="Меня тоже нажми!"0NCLICK="btnOKOnClick();"> </FORM> </BODY>

Решение 2 (для Firefox)

Использовать свойство target описанного выше объекта, который передается в функцию-слушатель и несет различную информацию о событии.

Пример

<HEAD>

<SCRIPT TYPE="text/javascript"> function btnOKOnClick(event) {

if (event.target.value == "Нажми!")

event.target.value = "Нажато" else

event.target.value = "Нажми!"; } </SCRIPT> </HEAD> <BODY> <FORM>

<INPUT TYPE="button" ID="btnOK" VALUE="Нажми!"0NCLICK=" btnOKOnCl ick () ; " > </FORM> <SCRIPT TYPE="text/javascript">

var btnOKObject = document.all["btnOK"];

btnOKObject.addEventListener("click", btnOKOnClick, false); </SCRIPT> </BODY>

Как прервать "всплытие" события? Проблема

Мне нужно в одном из обработчиков прервать "всплытие" события. Можно ли это сделать?

Решение (для Microsoft Internet Explorer и Opera)

Присвоить значение true свойству canceiBubbie описанного ранее объекта

event.

Пример

<HEAD>

<SCRIPT ТУРЕ="text/javascript"> function eventHandler() {

window.alert("Кнопка нажата!"); }

function btn30nClick() { window.alert("Кнопка З нажата!"); event.cancelBubble = true; } </SCRIPT> </HEAD> <BODY>

<FORM ONCLICK="eventHandler();">

<INPUT TYPE="button" ID="btnl" VALUE="Кнопка 1"> <INPUT TYPE="button" ID="btn2" VALUE="Кнопка 2"> <INPUT TYPE="button" ID="btn3" УАШЕ="Кнопка 3"ONCLICK="btn30nClick();"> </FORM> </BODY>

Решение (для Firefox)

Вызвать метод stopPropagation описанного ранее объекта, передаваемого в функцию-слушатель и несущего информацию о событии. Этот метод не принимает параметров и не возвращает значения.

Пример

<HEAD>

<SCRIPT TYPE="text/javascript"> function eventHandler() {

window.alert("Кнопка нажата!"); }

function btn30nClick(event) {

window.alert("Кнопка 3 нажата!");

event.stopPropagation(); }

</SCRIPT> </HEAD> <BODY>

<FORM ID="frm">

<INPUT TYPE="button" ID="btnl" VALUE="Кнопка 1"> <INPOT TYPE="button" ID="btn2" VALUE="Кнопка 2"> <INPUT TYPE="button" ID="btn3" VALUE="Кнопка 3"> </FORM> <SCRIPT TYPE="text/javascript">

var frmObject = document.all["frm"];

frmObject.addEventListener("click", eventHandler, false); var btn3Object = document.all["btn3"];

btn3Object.addEventListener("click", btn30nClick, false); </SCRIPT> </BODY>

Отмена действия по умолчанию в ответ на событие

Проблема

Мне необходимо отменить действие по умолчанию, которое Web-обозреватель выполняет в ответ на событие (переход по гиперссылке при щелчке на ней, отправку данных Web-формой при нажатии кнопки Отправить и пр.). Как это сделать?

Решение 1

Вставить в сценарий, являющийся значением соответствующего событию атрибута тега элемента, такое выражение:

return false;

Это выражение должно быть самым последним в теле функции-обработчика. Примеры

<Р><А HREF= "pagel.html" ONCLICK= "return false; ">Страница 1</А></Р>

При щелчке на этой гиперссылке перехода по указанному в атрибуте href тега <а> интернет-адресу не произойдет.

<А HREF="pagel.html" ONCLICK="onC.lickHandler(); return false;">Страница 1</А>

А при щелчке на этой гиперссылке выполнится объявленная ранее функция onClickHandler. Перехода по указанному в атрибуте href тега <а> интернет-адресу также не произойдет.


« Пред. - След. »

RLBN.ru - Электроника и компьютеры
0.1413
Hosted by uCoz