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
- Mtu anabobofya batani
- Anapo peleka ukurasa juu ama chini yaani anaposcroll
- Anapo load ukurasa
- Anapo hufuata kionyeshi (cusor)
- 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
- click endapo mtumiaji atabofya element ya html
- change endapo kutatokea mabadiliko kwenye ukurasa
- load endapo ukurasa utamaliza ku load
- mouseover endapo mouse itakuwa juu ya html element husika
- mouseout endapo mouse itakuwa mbali na html element
- keydown endapo mtumiaji atabofya keyboard
- keypress anapo bofya enter key
- focus endapo focus ya itakuwa kwenye html element fulani
- blur pindi html element itakapokosa focus
- 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="bold"> b - Element</b><br>
<b id="italic">i - Element</b><br>
<b id="para">p - Element</b>
<script>
var b = document.getElementById("bold");
b.addEventListener("click", function() {
document.write("Umebofya B element. Hii ni bold");
});
var i = document.getElementById("italic");
i.addEventListener("click", function() {
document.write("Umebofya i element. Hii ni italic");
});
var p = document.getElementById("para");
p.addEventListener("click", function() {
document.write("Umebofya p element. Hii ni paragraph");
});
</script>
</body>
</html>
change
Hii hutumika pale kunapotokea mabadiliko kwenye html element. Kwabmfano hapa tutatumia textarea ya kwenye html form.
Katika mfano huu mtu ataandika kwenye box akimaliza kuandika tu maneno aliandika kwenye box yatatokea chini. Akiyabadili bunde tu alimaliza mabadiliko yataonekana tena chini. Na hii ndio maana ya change.
<!DOCTYPE html>
<html>
<head>
<title>Change</title>
</head>
<body>
<textarea id="text" name="tex"></textarea>
<p id="para"></p>
<script>
var text = document.getElementById("text");
text.addEventListener("change", function() {
var value = document.getElementById("text").value;
document.getElementById("para").innerHTML = value;
});
</script>
</body>
</html>
onload
Event hii hufanya kazi wakati ambapo ukurasa una load ndio maana ikaitwa onload. Hivyo huleta matokeo pale ukurasa unapokuwa unaload tu, ukimaliza kuload ndipo event nyingine zitafuata.
<!DOCTYPE html>
<html>
<body onload="loadFunction()">
<p>haloo Bongoclass</p>
<script>
function loadFunction() {
alert("Haloo Ukurasa umemaliza ku load");
}
</script>
</body>
</html>
onfocus
Hii hutumika pale unapofocus kwenye element fulani. Kwa nfano kuna box unataka kuandika jina. Kitendo cha kuingia kwenye hiyo box tayari tunasema umesha focus kwenye hiyo box.
Ku focus ni sawa na kusema kudhamiria kitu. Sasa tofauti na kudhamiriabkwa nia hapa nibjwa vitendo. Kama una nia ya kuandikankwneye box sasa kitendo cha kuliingia hilo box na tayari kuandika ndipo ule focus. Sasa je unataka baada yavkubfocus hapo nini kitokee.
Katika mfano wetu huu hapa chini ukisha focus tunataka background ibadilike rangibkuwa nyekundu.
<!DOCTYPE html>
<html>
<body>
Andika jina: <input type="text" onfocus="myFunction(this)">
<script>
function myFunction(maudhui) {
maudhui.style.background = "red";
maudhui.style.color="blue";
}
</script>
</body>
</html>
onblur
Hii ni sawa na kusema kinyume cha focus. Tutatumia tena mfano wetu wa box. Kwa kuwa ku focus tulisema ni pale unapoingia kwenye box na kuanza kulifanyia kazi. Basi blur ni pale unapohamisha focus yako kwengine. Hivyo basi kama ulikuwa kwenye box utaondoka na kuelekea kwengine.
Sasa unataka nini kitokee pindi utakapihamisha focus yako kwenda kwengine?. Katika mfano wetu tunataka maandishibyabadilike kiwa ya herufi kubwa
<!DOCTYPE html>
<html>
<body>
Andika jina: <input type="text" id="box" onblur="looseFocus()">
<script>
function looseFocus() {
var maudhui = document.getElementById("box");
maudhui.value = maudhui.value.toUpperCase();
}
</script>
</body>
</html>
onmouseover na onmouseout
Hii hutumika pale mouse inapokuwa juu ya element. Kwa watumiaji wa simu mouse yako ni pale kidole chako litakalofuata pindi unapo gusa kioo cha simu yako.
Sasa event hii itafanya kazi pale ukigusa. Utakaotoa mouse yako event
Tunaposema onmouseout ni pale mouse yako itakapotoka kwenye element husika. Inamaana hivi mouseover pindi mouse inapokuwa juu ya hiyo element na utakapoitoa event hiyo huitwa mouseout.
Katika mfano wa hapo chini nimekuletea zote kwa pamoja. Kwanza ni mouseover kisha ukiiweka juu ya element event itafanya kazi na ukiitoa event ya pili itafanya kazi.
<!DOCTYPE html>
<html>
<body>
<p onmouseover="text1(this)" onmouseout="text2(this)">Haloo Bongocla</p>
<script>
function text1(a) {
a.style.color = "blue";
a.style.background = "yellow";
}
function text2(a) {
a.style.color = "green";
a.style.background = "purple";
}
</script>
</body>
</html>
Kabla ya event
keypress
Hii hutokea pale utakapobofya enter key. Hii ni event ambayo hutokea pale utakapobofya keyboard ya enter. Katika mfano wa hapo chini ukibofya enter maandishi uliiandika yataonekana.
<!DOCTYPE html>
<html>
<head>
<title> keypress </title>
</head>
<body>
<textarea id="area"></textarea>
<p>Umeandika: <span id="demo"></span></p>
<script>
var area = document.getElementById("area");
area.addEventListener("keypress", function() {
document.getElementById("demo").innerHTML = area.value;
});
</script>
</body>
</html>
Mwisho
Katika somo hili nimetumia mifano mingi ambayo kuna mambo jatujajifunza. Tutajifunza mbele ya masomo yajayo. Pia nakushauri pitia link ya event kutoka w3schools nimeweka hapo juu.
Tukutane soko la 15 tutajifunza jinsi ya kucheza na form na user input . Hapa zaidi tutaangalia jinsi ya kucheza na html form na input ambazo mtumiaji ataziweka.
