image

JAVASCRIPT - somo la 14: Jifunze kuhusu event kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript.

Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript. 

 

Mifano ya event

  1. Mtu anabobofya batani
  2. Anapo peleka ukurasa juu ama chini yaani anaposcroll
  3. Anapo load ukurasa
  4. Anapo hufuata kionyeshi (cusor) 
  5. Zipo event nyinginezo pia.

 

Sasa hasa tunachozungumziabhapa je ni kitu gani kifanyike endapo kutakuwa na event. Kwa mfano kama ebent ni kubifya batani sasa je nibkitu gani kitokee  baada ya kubofya hiyo batani. 

 

Mfano: 

Angalia code hizi: 

<!DOCTYPE html>

<html>

<head>

   <title>mfano wa event</title>

</head>

<body>

   <button id="btn"> Bofya hapa </button>

 

   <script>

      var btn = document.getElementById("btn");

      

      // the block of codes below is called event handler

      btn.onclick = function() {

         window.location.href="https://bongoclass.com";

      };

   </script>

</body>

</html>


 

 

Baada ya kubofya batani hapo utaona itakupeleka bongoclass.com moja kwa moja kwenye wesite. Sasa huo ndio mfano wa event. Je unataka. Nini kitokee baada ya event kutokea? 

 

Hizo code hapo ulizoziona zinazohusu event kitaalamu huitwa event handler au event listener. Event inaweza kuandikwa katika namna kuu mbili kwa njia ya block kama ulivyoona hapo juu kikundi cha code za javascript zilizo ndani ya tag ya javascript. Njia ya pili ni online njia hii ni pale unapoandika code za event ndani ya html tag bila hata ya kuhitaji javascript tag. 

 

Mfano wa inline event

<!DOCTYPE html>

<html>

<head>

   <title> inline Event </title>

</head>

<body>

   <button onclick='alert("Haloo hii ni Bongoclass.");'>Bofya hapa</button>

</body>

</html>

 

Mfano wa block event

<!DOCTYPE html>

<html>

<head>

   <title>mfano wa block event</title>

</head>

<body>

   <button onclick="salamu()"> Bofya haapa</button>

 

   <script>

      function salamu() {

         alert("Karibu Bongoclass");

      }

   </script>

</body>

</html>

 

Zingatia:

onclick ni event attribute ambayo inaunganisha event hisika na element ya HTML. katika hali kama hiyo click  ni jina la event. Katika mifano hiyo iliotangulia event attribute hapo zimetimika kama hatml tag attribute.

 

Jinsi ya kuandika event

Kwanza utaandika html element kama batani kisha itafuatiwa na event husika kisha itafuatiwa na Code za javascript zitakazofanya kazi kwenye hiyo event. 

<element event='code za JavaScript'>

 

Mfano

<button onclick='document.write("Karibu Bongoclass")'>h</button>

 

Katika mfano huo element ni button na event ni onclick jana javascript code ni document.write(). Kwa kufanya hivyo unaweza kutumia event nyinginezo. 

 

addEventListener()

Hii ni method ambayo hutumika kuunganisha document husika na event. Ama hutumika kuunganisha event zaidi ya moja kwenye element moja. 

 

Jinsi ya kutumia addEventListener()

Kwanza utaweka element mfano button kisha weka nukta ikifuatiliwa na method addEventListener() method huibhubeba parameter 3 ambazo ni event, function na useCapture. Ila hizo mbili ndio hutumika sana hii ya mwisho ipo by default ambayo ni false.


 

Kwa kutumia method hii unaweza kuweka function zaidi ya moja kwenye event moja. Mfano katika event ya click unaweza kuweka function zaidi yavmoja;

 

Mfano: 

<!DOCTYPE html>

<html>

<head>

   <title>addEventListener</title>

</head>

<body>

   <button id="btn"> Bofya hapa</button>

 

   <script>

      var btn = document.getElementById("btn");

      

      btn.addEventListener("click", function() {

         alert("welcome Bongoclass.");

      });

   </script>

</body>

</html>

 

Wacha sasa tuone mifano ya addEventListener yenye function zaidi ya moja kwenye event moja.

 

<!DOCTYPE html>  

<html>  

<head>

  <title>addEventListener</title>

</head>

<body>  

<button id = "btn">Bofya</button>  

<p id = "not1"></p>  

<p id = "not2"></p>  

<script>  

function karibu() {  

    alert("function ya kwanza Karibu Bongoclass");  

}  

function event2() {  

   document.getElementById("not1").innerHTML =  "Function ya pili kutoka kwenye not1";  

}  

function event3() {  

   document.getElementById("not2").innerHTML =  "Hii ni Function ya tatu kutoka kwenye not2";  

}  

var mybtn = document.getElementById("btn"); 

mybtn.addEventListener("click", karibu);  

mybtn.addEventListener("click", event2);  

mybtn.addEventListener("click", event3);  

</script>  

</body>  

</html> 

 


 

Hapo event yetu ni click ambayo ina function 2. Function hizo hazifanyi kazi mpaka mtumiaji abofye batani.

 

Akishabofya batani event ya click itaanza kufanya kazi. Function ya kwanza alaert itafanya kazi kisha itafuatiwa na function ya pili kisha ya tatu.

zingatio:

click ni event name yaani ina la event na onclick ni event attribute.

 

Aina za Events kwenye javascript

  1. click endapo mtumiaji atabofya element ya html
  2. change endapo kutatokea mabadiliko kwenye ukurasa
  3. load endapo ukurasa utamaliza ku load
  4. mouseover endapo mouse itakuwa juu ya html element husika
  5. mouseout endapo mouse itakuwa mbali na html element
  6. keydown endapo mtumiaji atabofya keyboard
  7. keypress anapo bofya enter key
  8. focus endapo focus ya itakuwa kwenye html element fulani
  9. blur pindi html element itakapokosa focus
  10. resize pindi size ya ukurasa itakapobadilika

 

Javascript event zipo nyingi ila katika somo hili tutafanya kazi chache tu. Kupata list nzima ya event w3schools wamekuwekea listvyabevent zote bofya hapa 

 

Baadhi ya javascript events

 

onclick

Event hii hutumika pale unapo bofya (click) html element. Watuvwengj wanafikiri kuwa batani pekee,  hapana unaweza bofya (click) hata paragraph na elemrnt nyingine. Kwa mfano hapa nitakuwekea elemnt ya b, p na i ambazo zote tuta bofya. 

 

<!DOCTYPE html>

<html>

<head>

   <title>onclick</title>

</head>

<body>

   <b id=">...



           

Je! umeipenda hii post?
Ndio            Hapana            Save post

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2023-10-20 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 211


Download our Apps
👉1 Madrasa kiganjani     👉2 kitabu cha Simulizi     👉3 Kitabu cha Afya     👉4 Kitau cha Fiqh    

Post zifazofanana:-

JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.
Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza ku display matokeo ya code za javascript. Soma Zaidi...

JAVASCRIPT - somo la 9: Jinsi ya kuandika function kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya kuandika function kwenye javascript. Utajifunz apia namna ya kuitumia function hiyo Soma Zaidi...

JAVASCRIPT - somo la 16: Jinsi ya kutumia html form kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya ku dili na html form kwenye javascript. Javascript inaweza kufanya mengi kwenye html form. Soma Zaidi...

JAVASCRIPT - somo la 22: Jinsi ya ku set time na tarehe
Katika somo hili tutakwenda kujifunza kuhusu ku set time. Yaani tutaweka muda ambao code zinatakiwa ndio zilete matokeo. Soma Zaidi...

JAVASCRIPT - somo la 4: Jinsi ya kuandika variable kwenye javascript
Katika somo hili utajifunza jinsi ya kuandika variable. Hapa utajifunza sheria zinazohusu variable katika javascript Soma Zaidi...

JAVASCRIPT -somo la 1: Kwa nini ni muhimu kujifunza javascript
Katika somo hili utajifunza kuhusu historia ya javacsript pamoja na kazi za javascript. Pia utayajuwa makampuni makubwa yanayotumia javascript. Soma Zaidi...

JAVASCRIPT - somo la 7: Jinsi ya kutumia logical operator kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya kutumia logical operator kwenye javascript. Katika somo hili tutakwenda kutumia mahesabu. Soma Zaidi...

JAVASCRIPT - somo la 17: condition statement za if else, else if kwenye javascript
Katika somo hili tutakwenda kujifunza kuhusu condition statemant. Darasa hili ni moja katika madarasa muhimu programming. Katika somo hili tutajifunza kwa vitendo zaidi. Tutatumia mifano ya somo lililo tangulia. Soma Zaidi...

Game 3: Mchezo wa kufikiria namba kwa kutumia javascript
Hii ni game ambayo utafikiria namba, ambayo inatakiwa iwe sawa na namba ambayo game imeiweka. Soma Zaidi...

JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript
Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza kutumia javascript kutengeneza kikokotoo cha hesabu yaani calculator Soma Zaidi...

JAVASCRIPT - somo la 24: Jinsi ya kutengeneza online keyboard
Katika project hii utakwenda kufunza jinsi utakavyoweza kutengeneza keyboard ya online kwa kutumia javascript Soma Zaidi...

JAVASCRIPT - somo la 20 Jinsi ya kutumia foOfloop kwenye javascript
Katika somo hili utajifunza jinsi ya kutumia forOfLoop. Hii ni aina ya loop ambayo yenyewe inahusisha item zote kwenye array. Soma Zaidi...