События JavaScript (5)

DOM начиная

DOM — это модель HTML-страницы. Каждый тег рассматривается как объект. JavaScript может программно управлять такими элементами, как текстовые поля и слои на веб-странице, вызывая свойства и методы в DOM. Например, манипулируя DOM-объектом текстового поля, вы можете прочитать значение в текстовом поле и установить значение в текстовом поле. JavaScript→DOM — это C#→ADO.NET. DOM — это некоторые классы и функции, которые позволяют JavaScript манипулировать элементами управления Html-страницы.
DOM, как и WinForm, программируется через события, свойства и методы.
CSS+JavaScript+DOM=DHtml

DOM Модель
событие

В DOM много событий. Демо:
1. //Обратите внимание на объем тела. Областью действия тела является область содержимого в теле. Если содержимого нет, событие не может быть инициировано.
2. Иногда код ответа события больше, его необходимо поместить в функцию:

****function userMouseDown () {

****alert ('Веб-страница была сломана вами>_);

****alert («Мне с тобой весело~~»);

}

****</script>

Примечание: В οnmοusedοwn=“userMouseDown();” круглые скобки после userMouseDown не могут быть потеряны (нельзя записать как οnmοusedοwn=“userMouseDown”), с () означает вызов функции, а непосредственное написание имени функции означает установку события обработчик userMouseDown. Можно сказать, что после щелчка будет запущен метод,

onclick=f1; означает, что метод, запускаемый onclick, равен f1.

οnclick="f1()" означает, что f1 вызывается в методе, запускаемом onclick

onclick=обработчик после возникновения события.

onclick=" f(this); " "; //Метод f() вызывается в обработчике события onclick

οnclick=f;//Обработчиком этого события является метод f().

Динамически устанавливаемые события

JavaScript также может динамически устанавливать события, как в .Net, Button.Click+=…

function F1() { alert('In F1'); }

function F2() { alert('In F2'); }

</script>

Примечание: οnclick="document.οnclick=F1;" Не добавляйте здесь круглые скобки к F1 и добавляйте круглые скобки, чтобы запрограммировать вызов функции F1(), и назначьте возвращаемое значение для document.onclick.

Область действия document.body.onclick ограничена телом

document.onclick распространяется на весь документ.

всплывающее окно событий

Всплывание событий: если элемент A вложен в элемент B, то при нажатии A будет запущено не только событие onclick A, но и событие B onclick. Порядок срабатывания "наизнанку". Проверка: добавьте таблицу на страницу, tr в таблицу, td в tr и p в td и добавьте ответ на событие onclick в p, td, tr и таблицу, например:

</tr>

</table>

Отменить всплывающую подсказку события: окно. event . cancelBubble **= true **;//IEправописание ниже.

</td>

<td>

bbb

</td>

</tr>

</table>

window.onload и загрузка тела

1. Эффект от обоих точно такой же, и они запускаются после загрузки содержимого страницы.

2. Поскольку в веб-странице нет окна, напишите в теле onload

3. Рекомендуется использовать window.onload// для эффективного использования js-скрипта

4На самом деле это должен быть document.onload, но все браузеры реализуют его для объекта окна.

в случае this

это в случае. В дополнение к возможности использовать event.srcElement в функции ответа на событие, это говоритсобытие происходитэлементы управления. Это можно использовать только в функции ответа на событие, чтобы получить элемент управления, в котором произошло событие. Его нельзя использовать в функции, вызываемой функцией ответа на событие (это представляет объект окна). Если вы хотите использовать это, вы должны передать это к функции или используйте event.srcElement, например:

<head>

function f3() {

alert(event.srcElement.value);

}

function f4() {

//Это представляет объект окна в вызывающей функции события

alert(this.location.href);

alert(this.value);

}

window.onload = function () {

btn5.onclick = function () {

alert(event.srcElement.value);

}

btn6.onclick = function () {

//В функции ответа на событие это представляет объект, который в данный момент запускает событие

alert(this.value);

}

</script>

</head>

<body>

<br />

</body>

</html>

(*) Семантика this и event.srcElement различна, это объект, который в данный момент прослушивает событие, а event.srcElement — это объект, вызвавший всплытие события: событие, например:

</tr>

</table>

</tr>

</table>