DHTML – обработка на събития Събитието ONCLICK <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <HTML><HEAD> <TITLE>DHTML Event Model - ONCLICK</TITLE> <SCRIPT LANGUAGE = "Java. Script" FOR = "para" EVENT ="ONCLICK"> alert( "Първи текст" ); </SCRIPT></HEAD> <BODY> <P ID = "para">опитайте да кликнете тук!</P> <INPUT TYPE = "button" VALUE = "Разгледайте реакцията на това събитие!" ONCLICK = "alert( 'Нов текст' )"; > </BODY> </HTML>
DHTML – обработка на събития Събитието ONLOAD <HTML><HEAD> <TITLE>DHTML Event Model - ONLOAD</TITLE> <SCRIPT LANGUAGE = "Java. Script"> var seconds = 0; function start. Timer() { // 1000 milliseconds = 1 second window. set. Interval( "update. Time()", 1000 ); } function update. Time() { seconds++; so. Far. inner. Text = seconds; } </SCRIPT></HEAD> <BODY ONLOAD = "start. Timer()"> <P>Вече гледате тази страница: <A ID = "so. Far" STYLE = "font-weight: bold">0</A></P> </BODY> </HTML>
DHTML – обработка на събития Обработка на грешки – ONERROR <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <HTML> <HEAD> <TITLE>DHTML Event Model - ONERROR</TITLE> <SCRIPT LANGUAGE = "Java. Script"> window. onerror = handle. Error; function do. This() { alrrt( "hi" ); // сгрешен синтаксис } // предават се 3 аргумента: име на грешката, url на файла и // номер на ред function handle. Error( err. Type, err. URL, err. Line. Num ) { // пише в status bar долу на страницата. window. status = "Error: " + err. Type + " on line " + err. Line. Num; // true канселира реакциите от браузъра. return true; } </SCRIPT> </HEAD> <BODY> <INPUT ID = "mybutton" TYPE = "button" VALUE = "Click Me!" ONCLICK = "do. This()"> </BODY> </HTML>
DHTML – обработка на събития
DHTML – обработка на събития Следене движението на мишката – ONMOUSEMOVE <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <HTML> <HEAD> <TITLE>DHTML Event Model - ONMOUSEMOVE </TITLE> <SCRIPT LANGUAGE = "Java. Script"> function update. Mouse. Coordinates() { coordinates. inner. Text = event. src. Element. tag. Name + " (" + event. offset. X + ", " + event. offset. Y + ")"; } </SCRIPT> </HEAD> <BODY ONMOUSEMOVE = "update. Mouse. Coordinates()"> <SPAN ID = "coordinates">(0, 0)</SPAN><BR> <IMG SRC = "mypicture. gif" STYLE = "position: absolute; top: 100; left: 100"> </BODY> </HTML> Oбектът event има 28 properties: offset. X, offset. Y, client. X, button, propertyname, screen. X, type. .
DHTML – обработка на събития
DHTML – обработка на събития Oбработки на форми – ONFOCUS, ONBLUR <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <HTML> <HEAD> <TITLE>DHTML Event Model - ONFOCUS и ONBLUR</TITLE> <SCRIPT LANGUAGE = "Java. Script"> var help. Array = [ "Въведете името си тук", "Въведете вашия email address в този блок, във формат - user@domain. ", "Изберете този блок акохаресвате сайта. ", "В този блок въведете коментар който искате да бъде прочетен. ", "С този бутон изпращате формата за обработка в сървърната страна", "С този бутон се изчисва формата", "Тази помощна област - TEXTAREA е място за context-sensitive help. Изберете някое поле или работете с TAB за да видите повече информация за него. " ]; function help. Text( message. Num ) { my. Form. help. Box. value = help. Array[ message. Num ]; } </SCRIPT> </HEAD>
DHTML – обработка на събития <BODY> <FORM ID = "my. Form"> Name: <INPUT TYPE = "text" NAME = "name" ONFOCUS = "help. Text(0)" ONBLUR = "help. Text(6)"><BR> Email: <INPUT TYPE = "text" NAME = "email" ONFOCUS = "help. Text(1)" ONBLUR = "help. Text(6)"><BR> Click here if you like this site <INPUT TYPE = "checkbox" NAME = "like" ONFOCUS = "help. Text(2)" ONBLUR = "help. Text(6)"><BR><HR>Искате ли коментар? <BR> <TEXTAREA NAME = "comments" ROWS = 5 COLS = 45 ONFOCUS = "help. Text(3)" ONBLUR = "help. Text(6)"></TEXTAREA><BR> <INPUT TYPE = "submit" VALUE = "Изпрати" ONFOCUS = "help. Text(4)" ONBLUR = "help. Text(6)"> <INPUT TYPE = "reset" VALUE = "Reset" ONFOCUS = "help. Text(5)" ONBLUR = "help. Text(6)"> <TEXTAREA NAME = "help. Box" STYLE = "position: absolute; right: 0; top: 0" ROWS = 4 COLS = 45> Тук виждате context-sensitive help. </TEXTAREA> </FORM> </BODY> </HTML>
DHTML – обработка на събития
DHTML – обработка на събития Mеханизъм на придвижване на съобщенията <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> <HTML> <HEAD> <TITLE>DHTML Event Model - Event Bubbling</TITLE> <SCRIPT LANGUAGE = "Java. Script"> function document. Click() { alert( "вие сте в документа" ); } function paragraph. Click( value ) { alert( "вие сте в текста" ); if ( value ) event. cancel. Bubble = true; } document. onclick = document. Click; </SCRIPT> </HEAD> <BODY> <P ONCLICK = "paragraph. Click( false )">Кликнете тук!</P> <P ONCLICK = "paragraph. Click( true )">Опитайте тук - има друг път на събитието</P> </BODY> </HTML>
DHTML – обработка на събития
DHTML – обработка на събития - DHTML поддържа над 60 събития от следните типове: clipboard events; data binding events; keyboard events; mouse events; други. - В Netscape процедурата е малко по-различна: if(window. Event ){ document. capture. Events(Event. CLICK) document. onclick = eventfunction } - В IE обектът window има дъщерен event, който е наличен по подразбиране при всяко възникване на събитие и съществува докато това събитие трае: document. onclick = eventfunction // не е нужно capture. Events(. . ) - В Netscape съобщенията се движат от обектите на върха на йерархията надолу. следователно, ако искате прихващането да е на по-долни нива, използвате методи за насочване на съобщенията – напр. route. Event, handle. Event.
DHTML – изброяване на наличните Events onabort onactivate Fires when the user aborts the download of an image. Fires when the object is set as the active element. onafterprint Fires on the object immediately after its associated document prints or previews for printing. Fires on a databound object after successfully updating the associated data in the data source object. Fires on the source object before the selection is copied to the system clipboard. Fires on the source object before the selection is deleted from the document. Fires on the target object before the selection is pasted from the system clipboard to the document. Fires on the object before its associated document prints or previews for printing. Fires on a databound object before updating the associated data in the data source object. onafterupdate onbeforecopy onbeforecut onbeforepaste onbeforeprint onbeforeupdate
onblur oncellchange onclick oncontextmenu oncopy oncut ondataavailable ondatasetchanged ondatasetcomplete ondblclick Fires when the object loses the input focus. Fires when data changes in the data provider. Fires when the contents of the object or selection have changed. Fires when the user clicks the left mouse button on the object. Fires when the user clicks the right mouse button in the client area, opening the context menu. Fires on the source element when the user copies the object or selection, adding it to the system clipboard. Fires on the source element when the object or selection is removed from the document and added to the system clipboard. Fires periodically as data arrives from data source objects that asynchronously transmit their data. Fires when the data set exposed by a data source object changes. Fires to indicate that all data is available from the data source object. Fires when the user double-clicks the object.
ondragend ondragenter ondragleave ondragover ondragstart ondrop onerrorupdate Fires on the source object continuously during a drag operation. Fires on the source object when the user releases the mouse at the close of a drag operation. Fires on the target element when the user drags the object to a valid drop target. Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. Fires on the target element continuously while the user drags the object over a valid drop target. Fires on the source object when the user starts to drag a text selection or selected object. Fires on the target object when the mouse button is released during a drag-and-drop operation. Fires when an error occurs during object loading. Fires on a databound object when an error occurs while updating the associated data in the data source object.
onfilterchange onfocusin onfocusout onhelp onkeydown onkeypress onkeyup onlayoutcomplete onload Onlosecapture Onmousedown Onmouseenter Onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onmoveend onmovestart Fires when a visual filter changes state or completes a transition. Fires when the object receives focus. Fires for an element just prior to setting focus on that element. Fires for the current element with focus immediately after moving focus to another element. Fires if F 1 key while the browser is the active window. Fires when the user presses a key. Fires when the user presses an alphanumeric key. Fires when the user releases a key. Fires when the print or print preview layout process finishes filling the current Layout. Rect object with content from the source document. Fires immediately after the browser loads the object. Fires when the object loses the mouse capture. Fires when the user clicks the object with either mouse button. Fires when the user moves the mouse pointer into the object. Fires when the user moves the mouse pointer outside the boundaries of the object. Fires when the user moves the mouse over the object. Fires when the user moves the mouse pointer outside the boundaries of the object. Fires when the user moves the mouse pointer into the object. Fires when user releases a mouse button while the mouse is over the object. Fires when the wheel button is rotated. Fires when the object moves. Fires when the object stops moving. Fires when the object starts to move.
onpaste Fires on the target object when the user pastes data, transferring the data from the system clipboard to the document. onpropertychange Fires when a property changes on the object. onreadystatechange Fires when the state of the object has changed. onreset Fires when the user resets a form. onresize Fires when the size of the object is about to change. onresizeend Fires when the user finishes changing the dimensions of the object in a control selection. onresizestart Fires when the user begins to change the dimensions of the object in a control selection. onrowenter Fires to indicate that the current row has changed in the data source and new data values are available on the object. onrowexit Fires before the data source control changes the current row in the object. onrowsdelete Fires when rows are about to be deleted from the recordset. onrowsinserted Fires just after new rows are inserted in the current recordset. onscroll Fires when the user repositions the scroll box in the scroll bar on the object. onselect Fires when the current selection changes. onselectionchange Fires when the selection state of a document changes. onselectstart Fires when the object is being selected. onstart Fires at the beginning of every loop of the marquee object. onstop Fires when the user clicks the Stop button or leaves the Web page. onsubmit Fires when a FORM is about to be submitted. onunload Fires immediately before the object is unloaded.
DHTML – обработка на събития - IE 5 поддържа и механизъм за обработка на грешки try catch throw Използва се ако: -е необходима различна реакция за различните проблеми; -скрипта ще се изпълянва в сървър, където няма обект window, който да прихваща грешките. При възникване на грешка на блока catch се подава обект грешка (е) имащ 2 свойства – номер и описание. (Преди анализа, обаче, номерът следва да се конвертират по определен начин (виж msdn. microsoft. com/scripting)). <SCRIPT LANGUAGE="Java. Script"> try { document. write("This statement works. ") document. write(fake. O. use()) document. write("This statement does not work. ") } catch (e) { str. Error=("An error occurred. The error number was "+e. number+". ") str. Error+=("The error message was ""+e. description+""") alert(str. Error) } </SCRIPT>
Скачать презентацию DHTML обработка на събития Събитието ONCLICK DOCTYPE
e8ddb8ecee3893db0e60ca8911141265.ppt