7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

JavaScript dan DOM: pelajaran 2

Scroll to top
Read Time: 17 mins

Indonesian (Bahasa Indonesia) translation by Sandi Muamar (you can also view the original English article)

Halo dan Selamat datang kembali ke seri "JavaScript dan DOM". Terakhir kali kita bahas beberapa dasar JavaScript dan kami menyentuh tentang berbagai aspek Document Object Model, termasuk cara mengakses node dan melewati DOM. Hari ini kita akan meliputi bagaimana memanipulasi elemen-elemen dalam DOM, dan kami akan mendiskusikan browser event model.

Memanipulasi elemen

Dalam pelajaran lalu kita membahas langkah-langkah yang terlibat dalam mengakses koleksi DOM node atau single DOM node. Sihir yang nyata terjadi ketika Anda memanipulasi properti tertentu menghasilkan apa yang secara luas dikenal sebagai "perilaku".

Setiap DOM node memiliki koleksi properti; sebagian besar properti ini menyediakan abstraksi untuk fungsi tertentu. Misalnya, jika Anda memiliki paragraph elemen dengan ID 'intro' Anda dapat dengan mudah mengubah warna elemen melalui DOM API:

Untuk menggambarkan sifat objek properti API ini mungkin lebih mudah untuk memahami jika kita break up dengan menetapkan setiap objek ke variabel:

Sekarang bahwa kita memiliki referensi ke objek 'style' dari paragraf kita dapat menambahkan style CSS lain:

Kami hanya menggunakan nama properti CSS dasar di sini. Satu-satunya perbedaan adalah bahwa Anda biasanya akan menemukan dash('-') teks camel-case. Jadi daripada 'margin-top' kami menggunakan 'marginTop'. Berikut, misalnya, tidak akan bekerja dan akan menghasilkan kesalahan sintaks:

Properti dapat diakses dengan cara seperti array. Jadi, dengan pengetahuan ini kita bisa membuat fungsi kecil untuk mengubah style apapun dari elemen tertentu:

Ini adalah hanya sebuah contoh - jujur itu tidak mungkin berguna karena, sintaksis, itu lebih cepat untuk menggunakan cara konvensional yang ditampilkan sebelumnya (misalnya elem.style.color = 'red').

Serta properti 'style' ada banyak orang lain yang dapat Anda gunakan untuk memanipulasi aspek-aspek tertentu dari node/elemen. Pada kenyataannya, jika Anda memiliki Firebug diinstal Anda harus mencoba "inspecting an element", kemudian klik pada tab "DOM" (biasanya ke kanan atau di bawah panel melihat elemen) untuk melihat semua properti:

DOM Element properties, in the Firebug addon for FirefoxDOM Element properties, in the Firebug addon for FirefoxDOM Element properties, in the Firebug addon for Firefox
DOM elemen properti, Firebug

Semua properti dapat diakses menggunakan notasi titik konvensional (misalnya Element.tabIndex). Tidak semua properti adalah tipe primitif data (string, angka, Boolean dll.); Properti 'style' misalnya, yang kita bahas sebelumnya, adalah sebuah objek yang mengandung properti sendiri. Banyak property elemen hanya readable; apa yang saya maksudkan dengan ini adalah bahwa Anda tidak dapat mengubah nilai mereka. Misalnya, Anda tidak dapat mengubah properti 'parentNode' dari sebuah node. Browser biasanya akan melemparkan kesalahan jika Anda mencoba untuk mengubah salah satu properti ini read-only: misalnya ERROR: "setting a property that has only a getter". Hanya saja sesuatu untuk menyadari...

Salah satu persyaratan yang umum adalah untuk mengubah konten dalam elemen. Ada beberapa cara yang berbeda untuk melakukan hal ini. Jauh cara termudah adalah dengan menggunakan properti 'innerHTML', seperti ini:

Satu-satunya masalah dengan metode ini adalah bahwa hal itu tidak ditentukan dalam standar apapun dan tidak dalam spesifikasi DOM. Jika Anda tidak peduli tentang hal itu kemudian pergi ke depan dan menggunakannya. Hal ini biasanya jauh lebih cepat daripada metode konvensional DOM anyway, yang kami akan mencakup berikutnya.

Node

Ketika membuat konten melalui DOM API Anda perlu menyadari dua jenis node, node elemen, dan teks node. Ada banyak jenis node tetapi kedua yang penting hanya untuk sekarang.

Untuk membuat sebuah elemen menggunakan metode 'createElement' dan untuk menciptakan sebuah teks node menggunakan metode 'createTextNode', yang keduanya ditampilkan di bawah ini:

Di sini kami menggunakan metode 'appendChild' untuk menambahkan node teks baru kami ke paragraf. Melakukannya dengan cara ini memakan waktu sedikit lebih lama daripada metode non-standar innerHTML tetapi masih penting untuk mengetahui cara kedua sehingga Anda dapat membuat keputusan yang tepat. Berikut adalah contoh yang lebih advanced menggunakan metode DOM:

Ada juga metode DOM 'insertBefore' yang cukup jelas. Menggunakan dua metode ini ('insertBefore' & 'appendChild'), kita dapat membuat kami sendiri 'insertAfter' fungsi:

Fungsi di atas cek keberadaan target berikutnya saudara dalam DOM, jika ada kemudian akan menyisipkan node 'bullet' sebelum target sibling berikutnya, jika tidak akan menganggap bahwa target child terakhir elemen dan jadi tidak apa-apa untuk menambahkan bullet sebagai child dari parent. DOM API memberikan kita tidak ada 'insertAfter' metode karena ada tidak perlu - kita dapat membuatnya sendiri.

Ada cukup sedikit lebih untuk belajar tentang memanipulasi elemen-elemen dalam DOM tetapi atas harus dasar yang cukup di mana Anda dapat membuatnya.

Event

event browser adalah core aplikasi web dan kebanyakan JavaScript tambahan. Ini adalah melalui event yang kita mendefinisikan ketika sesuatu yang akan terjadi. Jika Anda memiliki sebuah tombol di dokumen Anda dan Anda memerlukan beberapa validasi form untuk mengambil tempat saat itu telah diklik maka Anda akan menggunakan event 'click'. Berikut ini adalah gambaran peristiwa browser standar:

Catatan: Seperti yang kita bahas terakhir kali, DOM dan bahasa JavaScript adalah dua entitas terpisah. Event browser adalah bagian dari DOM API, mereka tidak bagian dari JavaScript.

Mouse event

  • 'mousedown' - event mousedown dijalankan ketika menunjuk perangkat (biasanya mouse) ditekan ke bawah lebih dari sebuah elemen.
  • 'mouseup' - event mouseup dijalankan ketika menunjuk perangkat (biasanya mouse) dirilis lebih dari sebuah elemen.
  • 'click' - event klik didefinisikan sebagai mousedown diikuti oleh mouseup di posisi yang sama.
  • 'dblclick' - event ini dijalankan ketika elemen diklik dua kali dalam pergantian yang cepat di posisi yang sama.
  • 'mouseover' - mouseover dijalankan ketika menunjuk perangkat digerakkan di atas suatu elemen.
  • 'mouseout' - mouseout event dijalankan ketika menunjuk perangkat pindah dari elemen. (dari elemen)
  • 'mousemove' - event mousemove dijalankan ketika menunjuk perangkat pindah sambil melayang di atas suatu elemen.

Keyboard event

  • 'keypress' - event ini dijalankan ketika tombol pada keyboard ditekan.
  • 'keydown' - event ini dijalankanketika tombol ditekan, itu berjalan sebelum event 'keypress'.
  • 'keyup' - event ini dijalankan ketika tombol dilepaskan, setelah peristiwa-peristiwa yang baik 'keydown' dan 'menekan keypress'.

Form event

  • 'select' - event ini dijalankan ketika teks dalam textfield (input, textarea dll) dipilih.
  • 'change' - event ini dijalankan ketika kontrol kehilangan fokus input dan/atau nilai telah diubah sejak memperoleh fokus.
  • 'submit' - event ini dijalankan ketika form dikirimkan.
  • 'reset' - event ini dijalankan ketika form di reset.
  • 'focus' - event ini dijalankan ketika elemen menerima fokus, biasanya dari perangkat penunjuk.
  • 'blue' - event ini dijalankan ketika elemen kehilangan fokus, biasanya dari perangkat penunjuk.

event lainnya

  • 'load' - event ini dijalankan ketika user agent selesai memuat semua konten dalam sebuah dokumen, termasuk konten, foto, bingkai dan objek. Untuk elemen, seperti 'IMG' dijalankan ketika konten yang dimaksud selesai loading.
  • 'resize' - event ini dijalankan ketika tampilan dokumen diubah ukurannya. (yaitu ketika browser diubah ukurannya.)
  • 'scroll' - event ini dijalankan ketika dokumen discroll.
  • 'unload' - event ini dijalankan ketika agen pengguna menghapus semua konten dari jendela atau bingkai, yaitu ketika Anda meninggalkan halaman.nm

Ada lebih banyak acara untuk memilih. Semua yang ditunjukkan di atas adalah yang utama yang Anda akan datang di sering dalam kode JavaScript. Perlu diketahui bahwa beberapa dari mereka memiliki perbedaan lintas-browser. Juga, perlu diketahui bahwa banyak browser mengimplementasikan eksklusif event, misalnya ada beberapa event Gecko-spesifik, seperti 'DOMContentLoaded' atau 'DOMMouseScroll' - Anda dapat membaca lebih lanjut tentang ini di sini: https://developer.mozilla.org/en/Gecko-Specific_DOM_Events

Penanganan event

Kita telah membahas event aktual tapi kami belum pernah membahas proses melampirkan fungsi ke eve t. Ini adalah mana keajaiban terjadi. event yang tercantum di atas akan semua terjadi terlepas dari Apakah Anda telah menulis JavaScript apapun, sehingga untuk memanfaatkan kekuatan mereka, Anda harus mendaftar "event handlers" - ini adalah istilah mewah untuk menggambarkan fungsi yang digunakan untuk menangani event. Berikut adalah contoh sederhana menggunakan dasar event pendaftaran model (juga dikenal sebagai "event tradisional pendaftaran"):

pendaftaran event dasar:

Kami punya tombol HTML dengan ID dari 'my-button' dan kami telah diakses menggunakan perintah 'document.getElementById'. Kemudian kami menciptakan sebuah fungsi baru yang kemudian ditetapkan ke 'onclick' DOM properti tombol. Itu semua ada untuk itu!

Model "event dasar pendaftaran" sederhana karena mendapat. Anda awalan event Anda setelah dengan 'on' dan mengaksesnya sebagai properti unsur apa pun Anda bekerja dengan. Ini adalah dasarnya tidak mengganggu versi melakukan sesuatu seperti ini (yang saya tidak sarankan):

Penanganan event inline (menggunakan atribut HTML) sangat menonjol dan membuat website Anda jauh lebih sulit untuk di maintenance. Hal ini lebih baik menggunakan JavaScript dan memiliki semua itu terkandung dalam masing-masing '.js' file yang dapat dimasukkan dalam dokumen sebagai/ketika diperlukan. Sementara kita pada subjek mengganggu JavaScript saya ingin untuk mengoreksi kesalahpahaman umum bahwa perpustakaan seperti jQuery membuat "mungkin kode diam-diam" - hal ini tidak benar. Ketika Anda menggunakan jQuery sama mudah untuk melakukan hal-hal dengan cara yang salah. Alasan Anda tidak boleh menggunakan inline event handling adalah persis sama dengan alasan Anda tidak boleh menerapkan style CSS sejajar (menggunakan style = "").

Pendaftaran event lanjutan:

Jangan biarkan nama ini menyesatkan Anda, hanya karena itu disebut "lanjutkan" tidak berarti lebih baik untuk digunakan; pada kenyataannya, teknik yang kita bahas di atas ("event dasar pendaftaran") sangat cocok sebagian besar waktu. Menggunakan teknik dasar memiliki salah satu batasan kunci meskipun; Anda tidak dapat mengikat lebih dari satu fungsi event. Ini tidak begitu buruk sebenarnya, karena Anda bisa memanggil sejumlah fungsi lainnya dari dalam fungsi tunggal, tetapi jika Anda membutuhkan lebih banyak kontrol maka ada cara lain untuk mendaftar event, masukkan "lanjutan event pendaftaran model".

Model ini memungkinkan Anda untuk mengikat beberapa andler untuk satu event, berarti bahwa beberapa fungsi akan berjalan ketika suatu peristiwa terjadi. Selain itu, model ini memungkinkan Anda untuk dengan mudah menghapus salah satu terikat event handlers.

Sebenarnya, ada dua model yang berbeda dalam kategori ini; W3C dan Microsoft. W3C model didukung oleh semua browser modern selain IE, dan Microsoft model ini hanya didukung oleh IE. Berikut adalah bagaimana Anda akan menggunakan W3C model:

Dan di sini adalah sama, tetapi untuk IE (Microsoft model):

Dan di sini adalah 'introClick' fungsi:

Karena fakta bahwa model tidak bekerja di semua browser itu adalah ide yang baik untuk menggabungkan keduanya dalam fungsi kustom. Berikut adalah fungsi sangat dasar 'addEvent', yang bekerja lintas-browser:

Fungsi memeriksa sifat 'attachEvent' dan 'addEventListener' dan kemudian menggunakan salah satu model tergantung pada tes itu. Kedua model membuatnya mungkin untuk menghapus event handler juga, seperti yang ditunjukkan dalam 'removeEvent' fungsi ini:

Anda akan menggunakan fungsi seperti ini:

Perhatikan bahwa kita melewati fungsi tanpa nama sebagai parameter ketiga. JavaScript memungkinkan kita untuk menetapkan dan melaksanakan fungsi tanpa menyebut mereka; fungsi dari jenis ini disebut "fungsi anonim" dan dapat sangat berguna, terutama ketika Anda butuhkan untuk melewati sebuah fungsi sebagai parameter ke fungsi lain. Kita bisa hanya menempatkan fungsi 'introClick' kami (didefinisikan sebelumnya) ketiga parameter tapi kadang-kadang itu yang lebih mudah untuk melakukannya dengan fungsi anonim.

Jika Anda ingin tindakan terjadi pada event hanya pertama kalinya telah mengklik Anda bisa melakukan sesuatu seperti ini:

Kami sedang menghapus handler segera setelah event dijalankan untuk pertama kalinya. Kami belum dapat menggunakan fungsi anonim dalam contoh di atas karena kami harus mempertahankan referensi fungsi ('oneClickOnly') sehingga kami bisa kemudian menghapusnya. Yang mengatakan, benar-benar mungkin untuk mencapai dengan fungsi (anonymous):

Kita sedang cukup bermuka tebal di sini oleh referensi properti 'callee' objek 'argumen'. Objek 'argumens' berisi semua parameter yang dimasukan fungsi apapun dan juga berisi referensi ke fungsi itu sendiri ('callee'). Dengan melakukan ini kita benar-benar menghilangkan kebutuhan untuk mendefinisikan fungsi bernama (misalnya, 'oneClickOnly' fungsi ditampilkan sebelumnya).

Terlepas dari perbedaan sintaksis yang jelas antara implementasi W3C dan Microsoft ada beberapa perbedaan lain patut dicatat. Ketika Anda mengikat fungsi untuk event fungsi harus dijalankan dalam konteks elemen, dan begitu kata kunci 'this' dalam fungsi harus referensi elemen; menggunakan model pendaftaran dasar peristiwa atau W3C lanjutan model ini bekerja tanpa kesalahan, tetapi implementasi Microsoft gagal. Berikut adalah contoh dari apa yang Anda harus mampu melakukan dalam penanganan fungsi event:

Ada beberapa cara yang berbeda untuk menghindari/memperbaiki masalah ini. Sejauh pilihan termudah adalah dengan menggunakan model dasar - ada hampir tidak ada inkonsistensi lintas-browser ketika menggunakan model ini. Jika, bagaimanapun, Anda ingin menggunakan model canggih dan Anda memerlukan kata kunci 'this' untuk referensi elemen dengan benar maka Anda harus melihat beberapa fungsi lebih luas diadopsi 'addEvent', khususnya John Resig's atau Dean Edward's (nya bahkan tidak menggunakan lanjutan model, luar biasa!).

Objek Event

Salah satu aspek penting dari event handling yang kita sudah diskusikan namun untuk membahas adalah sesuatu yang disebut "objek event". Setiap kali Anda mengikat fungsi untuk sebuah event, yaitu setiap kali Anda membuat sebuah event handler, fungsi akan memasukan objek. Hal ini terjadi secara native sehingga Anda tidak perlu mengambil tindakan untuk mendorong itu. Objek event ini berisi berbagai informasi tentang event yang hanya terjadi; ini juga berisi metode eksekusi yang memiliki berbagai efek perilaku pada event. Tapi, tidak mengejutkan, Microsoft memilih cara tersendiri untuk mengimplementasikan "fitur"; IE browser tidak lulus objek acara ini, sebaliknya Anda harus mengaksesnya sebagai properti dari obyek global jendela; ini sebenarnya tidak masalah, itu hanya sebuah gangguan:

Untuk memeriksa keberadaan 'e' objek ("objek event") kami menggunakan operator OR (Logis) yang pada dasarnya menentukan berikut: jika 'e' adalah nilai "falsy" (0 null, undefined, dll) kemudian menetapkan 'window.event' untuk 'e'; Sebaliknya hanya menggunakan 'e'. Ini adalah cara yang cepat dan mudah untuk mendapatkan objek event nyata dalam lingkungan lintas-browser. Jika Anda tidak nyaman dengan menggunakan logical operator di luar sebuah if statement kemudian membangun ini mungkin sesuai dengan anda:

Beberapa perintah yang paling berguna dan properti dari objek event ini, sayangnya, tidak konsisten dilaksanakan di browser (yaitu IE vs lainnya). Sebagai contoh, membatalkan aksi default sebuah event dapat dicapai dengan menggunakan metode 'preventDefault()' objek acara tetapi di IE ini hanya dapat dicapai dengan menggunakan 'returnValue' properti dari objek. Jadi, sekali lagi, kita harus menggunakan kedua untuk mengakomodasi semua browser:

Aksi default sebuah event adalah apa yang biasanya terjadi sebagai akibat dari event yang dijalankan itu. Ketika Anda klik pada link anchor aksi default adalah untuk browser untuk menavigasi ke lokasi yang ditentukan dalam 'href' atribut dari link tersebut. Tapi kadang-kadang Anda akan ingin menonaktifkan aksi default ini.

'returnValue' / 'preventDefault' gangguan tidak sendiri; banyak sifat lainnya objek event tidak konsisten dilaksanakan sehingga ini jika/lain/atau memeriksa model adalah tugas yang diperlukan.

Banyak dari hari ini JavaScript perpustakaan menormalisasi objek event, berarti bahwa perintah seperti 'e.preventDefault' akan tersedia di IE, meskipun, Anda harus mencatat bahwa di balik layar 'returnValue' properti masih digunakan.

Event bubbling

Event bubbling, juga dikenal sebagai "event propagation", adalah ketika event dijalankan dan kemudian peristiwa "gelembung" melalui DOM. Hal pertama yang harus diperhatikan adalah bahwa tidak semua peristiwa gelembung, tetapi bagi mereka yang melakukan, berikut adalah cara kerjanya:

Event yang dijalakan pada elemen target. Event kemudian dijalankan pada ancestor setiap elemen - Event bubble melalui DOM hingga mencapai elemen teratas:

Event bubbling graphicEvent bubbling graphicEvent bubbling graphic
Event bubbling, ilustrasi

Seperti yang terlihat pada grafik di atas, jika sebuah anchor dalam paragraf diklik anchor click event akan dijalakan pertama dan kemudian, berikut bahwa, paragraf klik event akan dijalakan dll sampai dari elemen body tercapai (body adalah elemen DOM tertinggi yang memiliki click event).

Event akan dijalakan dalam urutan itu, mereka yang tidak semua terjadi pada waktu yang sama.

Ide dari event bubbling mungkin tidak membuat banyak akal pada awalnya tapi akhirnya menjadi jelas bahwa itu adalah bagian mendasar dari apa yang kita anggap "perilaku normal". Ketika Anda mengikat handler untuk klik event paragraf Anda mengharapkan untuk menjalakan setiap kali paragraph diklik, kan? Yah, itu adalah persis apa "event bubbling" memastikan - jika paragraf memiliki beberapa children, (<span>s, <anchors>s, <em>s) kemudian bahkan ketika mereka sedang diklik pada event akan gelembung sampai dengan paragraf.

Perilaku ini dapat dihentikan setiap saat selama proses. Jadi jika Anda hanya ingin event bubbling sampai paragraf tapi tidak lebih (tidak untuk body node) maka Anda dapat menggunakan lain yang berguna metode yang ditemukan dalam event objek, "stopPropagation":

Event delegasi

Katakanlah, misalnya, Anda memiliki sebuah table besar dengan banyak baris data. Mengikat klik event-handler untuk setiap<tr>dapat menjadi usaha yang berbahaya, terutama karena efek negatif yang memiliki kinerja. Cara yang umum untuk memerangi masalah ini adalah dengan menggunakan "event delegasi". Event delegasi menjelaskan proses menerapkan sebuah event handler ke sebuah wadah elemen dan kemudian menggunakan itu sebagai dasar untuk semua elemen anak. Dengan menguji properti objek event 'target' ('srcElement' di IE), kita dapat menentukan element klik.

Event delegasi bergantung pada event bubbling. Kode di atas tidak bekerja jika yang menggelegak dihentikan sebelum mencapai node 'tabel'.

Itu untuk hari ini!

Kita telah membahas bagaimana memanipulasi elemen DOM dan kita telah membahas, cukup banyak kedalaman, browser acara model. Saya harap Anda telah belajar sesuatu hari ini! Seperti biasa, jika Anda memiliki pertanyaan, jangan ragu untuk bertanya.

  • Berlangganan ke NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.