Tutorial Menambah Event pada Element

Setelah memahami script untuk memilih element dengan class tertentu, maka kita kembangkan lagi script yang kita sudah miliki.

Tutorial -2 Kali ini kita tambahkan "event" pada element, dan "event" ini akan memanggil suatu "function". Event dan function ini yang membuat element-element dalam web menjadi interaktif.

Untuk contoh kali ini, kita coba membuat semua element li.parent untuk menampilkan element anak-anaknya muncul saat li.parent di-hover mouse, dan menyembunyikan element anak saat li,parent tidak lagi di-hover mouse.

Kita gunakan basic script yang sebelumnya.

window.addEvent('domready', function() {

//masukan script2 di sini

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {

//masukan script untuk element-element dalam myparent

element.setStyle('display','none');                             

});

)};

Pada setiap element li.parent yang dimasukan ke myparent, akan kita tambahkan 2 event berbeda yang masing-masing akan memanggil function yang berbeda pula, yaitu:

Event 'mouseover' akan memanggil function "showChildren" saat element myparent di-hover mouse.

Event 'mouseout' akan memanggil function "hideChildren" saat element myparent tidak lagi di-hover mouse.

Script untuk menambahkan event pada element-nya:

      element.addEvent('mouseover', showChildren);

      element.addEvent('mouseout', hideChildren);


Dalam efek ini, kita hendak membuat element-element anak tidak ditampilkan, sebelum di-hover. Oleh karena itu, kita harus menghilangkannya dengan script:

//panggil anak-anak element myparent menjadi myChildren

var myChildren = element.getChildren('ul');

//sembunyikan myChildren sebagai kondisi awal

myChildren.setStyle('display','none');

Berikutnya, kita buat script function showChildren dan hideChildren. Script-nya:



function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


Lengkapnya menjadi sbb:

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('mouseover', showChildren);
element.addEvent('mouseout', hideChildren);
var mychildren = element.getChildren('ul');
mychildren.setStyle('display','none');
});

function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','block');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


End of tutorial script - 2.

Tutorial yang lain:
Tutorial Menambah Efek Toggle pada Element Joomla.