Register Event Handler Via Traditional Model

Cara ini dikatakan 'tradisional model', karena event handler diregister via scripting, scripting language bisa JavaScript, VBScript, dll.

Sebelumnya...
Fungsi yang menghandle event dinamakan event handler. Proses meregister event handler kepada event di suatu node DOM dinamakan registering an event handler.

Meregister event handler untuk suatu elemen secara langsung via scripting, sebelumnya suatu fungsi harus digambarkan. Cara ini anda tidak akan lagi berkutat di dalam tag-tag elemen untuk meregister event handler, sebagaimana bentuk cara Register Event Handler Via Inline Model.

Bentuk fungsi untuk menghandle event seperti berikut:

function functionName(){ //statements }

Misalnya:

function handleClick(){ alert("Halo saya event handler!"); }

Kemudian menentukan elemen mana yang ingin ditambahkan event handler itu, sebagai contoh event handler itu untuk elemen BUTTON:

document.getElementById("buttonID").onclick = handleClick;

Dan BUTTON itu seperti berikut:

<BUTTON ID="buttonID">Klik disini</BUTTON>

Berikut contoh lengkapnya dari penjabaran di atas:

<BUTTON ID="buttonID">Klik disini</BUTTON> <SCRIPT TYPE="text/javascript"> function handleClick(){ alert('Halo saya event handler!'); } document.getElementById("buttonID").onclick = handleClick; </SCRIPT>

Untuk cara 'tradisional model' bisa di lihat pada kode yang diberikan warna merah, itu tidak menggunakan tanda () sebagai nilai onclick.

Untuk contoh menggunakan cara ini akan sama seperti:

<BUTTON ONCLICK="alert('Halo saya event handler!')">Klik disini</BUTTON>

Ketika anda menggunakan cara Register Event Handler Via Inline Model.

Selain onclick, ada onabort, onblur, onchange, onclick, ondblclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onresize, onselect, onsubmit, onunload.

Catatan: Pastikan penulisan nama event handler untuk cara 'tradisional model' menggunakan huruf kecil semua.