Hodisalar: change, input, cut, copy, paste

Ma’lumot yangilanishlari bilan birga keladigan turli hodisalarni ko’rib chiqamiz.

Hodisa: change

change hodisasi element o’zgarishni tugatganda ishga tushadi.

Matn inputlari uchun bu hodisaning fokusni yo’qotganda sodir bo’lishini anglatadi.

Masalan, quyidagi matn maydonida yozayotganimizda – hodisa bo’lmaydi. Lekin fokusni boshqa joyga, masalan tugmaga bosganimizda – change hodisasi bo’ladi:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Tugma">

Boshqa elementlar uchun: select, input type=checkbox/radio tanlash o’zgarishidan keyin darhol ishga tushadi:

<select onchange="alert(this.value)">
  <option value="">Biror narsani tanlang</option>
  <option value="1">1-variant</option>
  <option value="2">2-variant</option>
  <option value="3">3-variant</option>
</select>

Hodisa: input

input hodisasi foydalanuvchi tomonidan qiymat o’zgartirilgandan keyin har safar ishga tushadi.

Klaviatura hodisalaridan farqli o’laroq, u har qanday qiymat o’zgarishida, hatto klaviatura harakatlarini o’z ichiga olmaganlarida ham ishga tushadi: sichqoncha bilan joylashtirish yoki matnni aytish uchun nutqni tanish texnologiyasidan foydalanish.

Masalan:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

Agar biz <input> ning har bir o’zgarishini qayta ishlamoqchi bo’lsak, bu hodisa eng yaxshi tanlovdir.

Boshqa tomondan, input hodisasi klaviatura kiritish va qiymat o’zgarishini o’z ichiga olmaydigan boshqa harakatlarda, masalan inputda bo’lganida o’q tugmalarini ⇦ ⇨ bosganda ishga tushmaydi.

Hodisalar: cut, copy, paste

Bu hodisalar qiymatni kesish/nusxalash/joylashtirish paytida sodir bo’ladi.

Ular ClipboardEvent sinfiga tegishli va nusxalangan/joylashtirilgan ma’lumotlarga kirish imkonini beradi.

Harakatni bekor qilish uchun event.preventDefault() dan ham foydalanishimiz mumkin, shunda hech narsa nusxalanmaydi/joylanmaydi.

Masalan, quyidagi kod barcha bunday hodisalarning oldini oladi va biz nima kesishga/nusxalashga/joylashtirshga harakat qilayotganimizni ko’rsatadi:

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

Diqqat qiling, nafaqat matn, balki hamma narsani nusxalash/joylashtirish mumkin. Masalan, biz OS fayl menejerida faylni nusxalashimiz va uni joylashtirshimiz mumkin.

Buning sababi clipboardData odatda drag’n’drop va nusxalash/joylashtirish uchun ishlatiladigan DataTransfer interfeysini amalga oshiradi. Bu hozir bizning qamrov doiramizdan biroz tashqarida, lekin siz uning metodlarini spetsifikatsiyada topishingiz mumkin.

Xulosa

Ma’lumot o’zgarishi hodisalari: