JavaScript
Урок  3
   
     
Урок 1       В този урок ще се запознаете с основните събития
Урок 2   в JavaScript. Събития-това са действия, които се 
Урок 4 извършват върху web-страница. За да "разбере" 
Урок 5 вашата web-страница какви събития се извършват 
Урок 6 над нея тя използва специални методи  дефинирани   
Урок 7 в JavaScript. Чрез тези методи , събитията се 
Урок 8  "прихващат". В зависимост от извършеното събитие
се изпълнява  дефинирано от вас действие . 
     Най-често срещаното събитие e щракване върху обект( бутон, хипервръзка...) то се "прихваща" от метода onClick.  
 
Ето и  кода за този бутон: 
<form> 
<input type="button" value="Щракни ме!" onClick="alert('Здравей')"> 
</form> 
Действието, което ще се изпълни при щракване върху бутона, е появяване на alert-прозорец. То се указва в реда:onClick="alert('Здравей')"> 
  
     Друго събитие е зареждането на страницата. То се "прихваща" от метода onLoad. За да се прихване събитието излизане от страницата, използвайте метода onUnload. 
     Ето един пример обхващащ трите показани дотук метода:  

 

Пример                                                                 3.1
<html> 
<head> 
<title>Смени фона</title> 
<Script language="JavaScript"> 
<!--hide 
function changeColor(color){ 
//този метод ще го научите в 
//следващия урок 
document.bgColor=color 
} 
//--> 
</script> 
</head> 
<body onLoad='alert("Здравей!")'  
onUnload='alert("Довиждане!")'> 

<h1><center>Натискайки бутоните променяш цвета на фона!</center> 
</h1><br><br><br> 
<form> 
<input type=button value="Син   "  
onClick="changeColor('blue')"> 

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp& 
nbsp&nbsp&nbsp&nbsp&nbsp 

<input type=button value="Червен"  
onClick="changeColor('red')"> 

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
&nbsp&nbsp&nbsp&nbsp&nbsp 

<input type=button value="Жълт "  
onClick="changeColor('yellow')"> 

&nbsp&nbsp&nbsp&nbsp&nbsp& 
nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 

<input type=button value="Зелен "  
onClick="changeColor('green')"> 

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
&nbsp&nbsp&nbsp&nbsp&nbsp 

<input type=button value="Неви " 
onClick="changeColor('#000080')"> 

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
&nbsp&nbsp&nbsp&nbsp&nbsp 

<input type=button value="Акуа   " onClick="changeColor('#00FFFFF')"> 
</form> 
</body> 
</html> 
 

Натисни отгоре и виж!
Пример1
  

     onMouseOver и onMouseOut "прихващат" кога курсорът на мишката е над обекта и съответно кога е преместен извън обекта. 
      Ето един интересен пример с тези методи: 
   
  
  

Пример                                                                                   3.2
<HTML> 
<HEAD> 
<TITLE>Мигащи Хипервръзки</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
IMG01 = "on.gif"  //картинка когато //курсорът е над връзката 
IMG02 = "off.gif" //картинка когато //курсорът не е над връзката 
 

function imgover(imgname){ 
     imgname.src = IMG01 
} 

function imgout(imgname){ 
     imgname.src = IMG02 
} 

//--> 
</SCRIPT> 
</HEAD> 
<BODY BGCOLOR="#00FFFFF"> 
<h2>Здравей избери една от двете хипервръзки</h2><br><br> 
<IMG NAME="IMG01" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>  
<A HREF="http://www.uni-sofia.bg" onMouseOver="imgover(IMG01)" onMouseOut="imgout(IMG01)">Софийски Университет</A> 
<br> 
<IMG NAME="IMG02" SRC="off.gif" WIDTH=10 HEIGHT=10 BORDER=0>  
<A HREF="http://www.yahoo.com" onMouseOver="imgover(IMG02)" onMouseOut="imgout(IMG02)">Yahoo</A> 

</body> 
</HTML>

Натисни отгоре и виж!
Пример2
  

    Още четири метода за прихващане на събития: 

  • onBlur  -при напускане на обект  
  • onSelect -при избиране на обект 
  • оnFocus -при избиране на хипервръзка
  • onChange -при промяна на обект
Ето един пример за тези четири метода: 
 
Пример                                                                                   3.3
<html> 
<head> 
<Script language="JavaScript"> 
<!-- 
function change(){ 
alert('OK') 
} 
//--> 
</script> 
</head> 
<body > 
<b>Попълни:</b> 
<FORM > 
<INPUT TYPE=button VALUE="ok" onClick="change()"> 
<input type=text value="ок като излезнеш" onBlur="change()" ><br> 
<input type=text value="" ><br> 
<input type=text value="ок когато маркираш" onSelect="change()" ><br> 
<input type=text value="ок когато промениш" onChange="change()" ><br> 
<a href="http://www.uni-sofia.bg" onFocus="change()"> 
Софийски Университет</a> 
  
</FORM> 
</body> 
</html> 
 
Натисни отгоре и виж!
Пример3
  
// не се зарежда правилно на по-старите браузъри!!// 

Естествено това не са всички JavaScript методи за прихващане на събития, но са най-често използваните. 

Урок 1      В примерите на следващите уроци активно ще 
Урок 2 участват показаните тук методи, така че ще видите за
Урок 4 какви други интересни ефекти могат да се използват.
Урок 5      В следващия урок ще научите основните обекти в
Урок 6 JavaScript.
Урок 7  
Урок 8   //Choose View-Encoding:Cyrillic from the menu //