Penggunaan Events Pada JQuery IT 2A

Penggunaan Events pada JQUERY

Nama Kelompok :

Heksa Tri Juliantara (4312010012) Hidayati Nuzula (4312010028) Juliany Hasanah (4312010031) Mega Puspita Sari (4312010033) Muhamad Armansyah (4312010007)

KELOMPOK 5

IT 2A

Politeknik Negeri Jakarta

KATA PENGANTAR

Puji syukur kami panjatkan ke hadirat Allah SWT, berkat rahmat dan karunianya

kami dapat menyelesaikan makalah mata kuliah Client Side Web Programming

yang berjudul ‘Penggunaan Events pada JQUERY’.

Kami sadar, makalah ini tidaklah sempurna dan masih banyak kekurangan-

kekurangan, karena Tak Ada Gading Yang Tak Retak. Maka dari itu, kami

sebagai penyusun, mengharapakan kritik dan saran yang membangun dari

pembaca agar dapat lebih baik dalam makalah selanjutnya.

Semoga makalah ini dapat bermanfaat bagi para pembaca. Terima Kasih.

Depok, Mei 2013

i

Daftar Isi

KATA PENGANTAR........................................................................................................i

Daftar Isi......................................................................................................................ii

BAB I PENDAHULUAN..................................................................................................1

1.1. Latar Belakang.................................................................................................1

1.2. Pembatasan Masalah.......................................................................................1

BAB II ISI......................................................................................................................2

2. 1 Event Method pada JQuery.............................................................................2

2. 2 Penjelasan Event Dasar pada JQuery............................................................4

1. Penulisan Syntax..............................................................................................5

2. Event - Event Dasar yang sering digunakan pada JQuer.............................5

BAB III PENUTUP .......................................................................................................11

3.1. Kesimpulan...........................................................................................................11

DAFTAR PUSTAKA................................................................................................12

ii

iii

Penggunaan Events Pada JQuery IT 2A

BAB I

Pendahuluan

1.1. Latar Belakang

Untuk mengoptimisasi dan meringkas penulisan library JavaScript, jQuery

merupakan jawaban yang tepat dalam hal tersebut. jQuery merupakan sebuah

framework dan cara baru dalam menuliskan kode JavaScript. Dengan

menggunakan jQuery, kita dapat mempercepat perpindahan dokumen HTML,

penanganan event(event-handling), dan pembuatan animasi didalam web untuk

memperindah website yang kita buat.

Agar pengguna(user) dapat berinteraksi dengan website dan dapat

mengatur tampilan pada penggunaan jQuery, diperlukan sebuah penanganan event

dengan menambahkan perintah-perintah seperti click() untuk menangani event

saat terjadi click, focus(), hover(), mouseout(), mouseleave(), dan lain-lainnya.

1.2. Pembatasan Masalah

Dalam makalah ini, penggunaan event yang diimplementasikan yaitu pada

saat pointer menuju kearah objek dan memanggil event yang telah diberikan

didalam objek tersebut. Event-event yang dibahas yaitu:

1. click()

2. dbclick()

3. focus()

4. hover()

5. mouseleave()

6. mousemove()

7. mouseout()

8. mouseover()

9. mouseenter()

10. scroll()

11. select()

1

Penggunaan Events Pada JQuery IT 2A

BAB II

Isi

2. 1 Event Method pada JQuery

Method Description

bind() Attaches event handlers to elements

blur() Attaches/Triggers the blur event

change() Attaches/Triggers the change event

click() Attaches/Triggers the click event

dblclick() Attaches/Triggers the double click event

delegate() Attaches a handler to current, or future, specified child elements of the matching elements

die() Removes all event handlers added with the live() method

error() Attaches/Triggers the error event

event.currentTarget

The current DOM element within the event bubbling phase

event.data Contains the optional data passed to an event method when the current executing handler is bound

event.delegateTarget

Returns the element where the currently-called jQuery event handler was attached

event.isDefaultPrevented()

Returns whether event.preventDefault() was called for the event object

event.isImmediatePropagationStopped()

Returns whether event.stopImmediatePropagation() was called for the event object

event.isPropagationStopped()

Returns whether event.stopPropagation() was called for the event object

event.namespace

Returns the namespace specified when the event was triggered

2

Penggunaan Events Pada JQuery IT 2A

event.pageX Returns the mouse position relative to the left edge of the document

event.pageY Returns the mouse position relative to the top edge of the document

event.preventDefault()

Prevents the default action of the event

event.relatedTarget

Returns which element being entered or exited on mouse movement.

event.result Contains the last/previous value returned by an event handler triggered by the specified event

event.stopImmediatePropagation()

Prevents other event handlers from being called

event.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event

event.target Returns which DOM element triggered the event

event.timeStamp

Returns the number of milliseconds since January 1, 1970, when the event is triggered

event.type Returns which event type was triggered

event.which Returns which keyboard key or mouse button was pressed for the event

focus() Attaches/Triggers the focus event

focusin() Attaches an event handler to the focusin event

focusout() Attaches an event handler to the focusout event

hover() Attaches two event handlers to the hover event

keydown() Attaches/Triggers the keydown event

keypress() Attaches/Triggers the keypress event

keyup() Attaches/Triggers the keyup event

live() Adds one or more event handlers to current, or future, selected elements

load() Attaches an event handler to the load event

mousedown() Attaches/Triggers the mousedown event

mouseenter() Attaches/Triggers the mouseenter event

mouseleave() Attaches/Triggers the mouseleave event

mousemove() Attaches/Triggers the mousemove event

3

Penggunaan Events Pada JQuery IT 2A

mouseout() Attaches/Triggers the mouseout event

mouseover() Attaches/Triggers the mouseover event

mouseup() Attaches/Triggers the mouseup event

off() Removes event handlers attached with the on() method

on() Attaches event handlers to elements

one() Adds one or more event handlers to selected elements. This handler can only be triggered once per element

$.proxy() Takes an existing function and returns a new one with a particular context

ready() Specifies a function to execute when the DOM is fully loaded

resize() Attaches/Triggers the resize event

scroll() Attaches/Triggers the scroll event

select() Attaches/Triggers the select event

submit() Attaches/Triggers the submit event

toggle() Attaches two or more functions to toggle between for the click event

trigger() Triggers all events bound to the selected elements

triggerHandler() Triggers all functions bound to a specified event for the selected elements

unbind() Removes an added event handler from selected elements

undelegate() Removes an event handler to selected elements, now or in the future

unload() Attaches an event handler to the unload event

2. 2 Penjelasan Event Dasar pada JQuery

Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini

Saya hanya ingin memperkenalkan event-event yang paling umum dan paling

banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event

yang lainnya suatu saat akan Saya jelaskan secara terpisah apabila Saya telah

mendapatkan contoh penerapan yang tepat.

Syntax dalam JQuery ada berbagai macam dan dibuat untuk menyeleksi

elemen - elemen HTML dan menciptakan aksi / event pada satu atau beberapa

4

Penggunaan Events Pada JQuery IT 2A

halaman website agar membuat sebuah tampilan site menjadi interaktif dan

dinamis. disini kita akan mempelajari macam - macam dari syantax JQuery.

1. Penulisan Syntax

Syantax dasar : $(Selector).action()

Tanda dolar (" $ ") untuk  merumuskan JQuery

Sebuah " ( ) " Selector untuk query atau menemukan / memilih elemen

- elemen HTML yang akan di beri JQuery

JQuery action() untuk di tamplikan di atas  elmen – elemen

Contoh penggunaan :

$(this).hide() -> Untuk Menyembunyikan elemen

$("p").hide() -> Untuk Menyembunyikan paragraf

$(".test").hide() -> Untuk menyembunyikan semua elemen dengan class  test

2. Event - Event Dasar yang sering digunakan pada JQuer

click()

Sebuah event atau animasi akan terjadi jika suatu objek yang di

pilih atau select di klik.

Penerapan event click()

 

5

Penggunaan Events Pada JQuery IT 2A

.dblclick()

Sebuah event atau animasi akan terjadi jika suatu objek yang di

pilih atau select di klik ganda / klik dua kali.

Penerapan event . dblclick()

 

.focus()

Untuk membuat suatu animasi atau peristiwa pada subjek/pemicu

(digunakan pada elemen-elemen seperti <input> .

 Penerapan event . focus()

6

Penggunaan Events Pada JQuery IT 2A

.mouseover()

Menimbulkan kejadian atau peristiwa ketika pointer mouse berada

di atas suatu subjek yang dituju.

.mouseout()

Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah

subjek yang di tuju.

Penerapan event .mouseover() dan .mouseout()

.mouseenter()

Sama dengan MouseOver(), menimbulkan peristiwa apabila

pointer mouse berada di atas subjek/pemicu. Namun saat pointer mouse

memasuki elemen induk (MouseOver()) dan pointer mendatangi anak-

anak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().

7

Penggunaan Events Pada JQuery IT 2A

.mouseleave()

Sama seperti Mouseout(),menimbulkan peristiwa apabila pointer

mouse pergi dari subjek/pemicu. Namun saat pointer mouse meninggalkan

sebuah anak elemen (dan masih dalam elemen induk), itu tidak sudah tidak

bisa dei sebut Mouseleaf(), hingga ketika pointer benar-benar telah keluar dari

elemen induk baru bisa disebut mouseleve().

Penerapan event .mouseenter() dan .mouseleave()

8

Penggunaan Events Pada JQuery IT 2A

.hover()

Adalah gabungan antara Mouseenter dan Mouseleave.Susunannya juga

merupakan gabungan dari keduanya.

 

.scroll()

Untuk menimbulkan suatu peristiwa ketika scroll di tarik(ini

berlaku untuk semua yang memiliki scroll).

Penerapan event .scroll()

 

9

Penggunaan Events Pada JQuery IT 2A

.select()

Untuk menimbulkan suatu peritiwa jika ada yang di select / blok

biasa di gunakan pada <input> dan <textarea>.

Penerapan event .select()

10

Penggunaan Events Pada JQuery IT 2A

BAB III

Penutup

3.1. KesimpulanEvent pada jQuery berfungsi untuk memperindah halaman web pada

event-event tertentu dan melakukan interaksi antara user dengan halaman web.

Dalam makalah ini, event yang kami bahas yaitu tentang pointer yang berfungsi

apabila object tersebut mendapat event tertentu, semisal click(), hover(), dan lain-

lainnya

11

Penggunaan Events Pada JQuery IT 2A

DAFTAR PUSTAKA

http://www.w3schools.com/jquery/event_click.asp

http://www.w3schools.com/jquery/event_dblclick.asp

http://www.w3schools.com/jquery/event_focus.asp

http://www.w3schools.com/jquery/event_hover.asp

http://www.w3schools.com/jquery/event_mouseleave.asp

http://www.w3schools.com/jquery/event_mousemove.asp

http://www.w3schools.com/jquery/event_mouseout.asp

http://www.w3schools.com/jquery/event_mouseover.asp

http://www.w3schools.com/jquery/event_scroll.asp

http://www.w3schools.com/jquery/event_select.asp

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

http://www.w3schools.com/jquery/jquery_ref_events.asp

http://jintoples.blogspot.com/2012/12/event-event-dasar-pada-

jquery.html#axzz2TyuF5mw3

12