DOCTYPE html head meta charsetutf8 head body script
Пример (событие документа) <!DOCTYPE html> <head> <meta charset="utf-8" /> </head> <body> <script> function ready() { alert( 'DOM готов' ); alert( "Размеры картинки: " + img. offset. Width + "x" + img. offset. Height ); } document. add. Event. Listener("DOMContent. Loaded", ready); </script> <img id="img" src="ris 1. jpg"> </body> </html>
Пример (событие мыши) <!DOCTYPE html> <head> <meta charset="utf-8" /> <style> #blue. Rect{ width: 100 px; height: 100 px; background-color: blue; } </style> </head> <body> <div id="blue. Rect"></div> <script> function set. Color(e){ if(e. type==="mouseover") e. target. style. background. Color = "red"; else if(e. type==="mouseout") e. target. style. background. Color = "blue"; } var blue. Rect = document. get. Element. By. Id("blue. Rect"); blue. Rect. add. Event. Listener("mouseover", set. Color); blue. Rect. add. Event. Listener("mouseout", set. Color); </script> </body> </html>
Пример (событие элемента управления) <html> <head> <style> a { color: blue; text-decoration: underline; cursor: pointer; } </style> <script language = 'javascript'> var default_color = "white"; function set. Temp. Color(color) { document. bg. Color = color; } function set. Default. Color(color) { default_color = color; document. bg. Color = default_color; } function default. Color() { document. bg. Color = default_color; } </script> </head> <body> <a on. Mouse. Over = "set. Temp. Color('white '); " on. Mouse. Out = "default. Color()" on. Click ="set. Default. Color('white'); ">Белый</a> <a on. Mouse. Over = "set. Temp. Color('yello w'); " on. Mouse. Out = "default. Color()" on. Clic k ="set. Default. Color('yellow'); ">Жёлтый</a > <a on. Mouse. Over = "set. Temp. Color('green '); " on. Mouse. Out = "default. Color()" on. Click ="set. Default. Color('green'); ">Зелёный</a> </body> </html>
Примеры � Событие onkeydown <input type="text" onkeydown="alert('Событие onkeydown. Дизайн студия OX 2')" /> � Событие onkeyup <input type="text" onkeyup="alert('Событие onkeyup. Дизайн студия OX 2')" /> � Событие onkeypress <input type="text" onkeypress="alert('Событие onkeypress. Дизайн студия OX 2')" />
Пример <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Событие onunload</title> </head> <body onunload="alert('Уже уходишь? ')"> <p>. . . </p> </body> </html>
Пример (событие CSS) <button id="color">Кликни меня</button> <style> #color { transition-property: background-color; transition-duration: 3 s; } </style> <script> color. onclick = function() { this. style. background. Color = 'red'; } </script>
Элементы веб-страницы и поддерживаемые события Обработчик события Поддерживающие HTML-элементы on. Abort IMG on. Blur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA on. Change INPUT, SELECT, TEXTAREA on. Dbl. Click Практически все HTML-элементы on. Error IMG, WINDOW on. Focus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA on. Key. Down Практически все HTML-элементы on. Key. Press Практически все HTML-элементы on. Key. Up Практически все HTML-элементы on. Load BODY, FRAMESET on. Mouse. Down Практически все HTML-элементы
Информационные ресурсы � https: //professorweb. ru/my/javascript/js_theory/level 2 /2_5. php � https: //itchief. ru/lessons/javascript-eventobject
- Slides: 33
![/html/body/script[1]](https://slidetodoc.com/wp-content/uploads/2020/11/2461385_a0401eb859b7126cc8822dd088a4a70b-300x208.jpg "/html/body/script[1]")
