Olay Yönetimi
Olay Yönetimi
Olay Yönetimi, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
jQuery'yi tanıtırken bunun yalnızca DOM değiştirme işlemleri için değil, aynı zamanda olay yönetimi gibi önemli bir özelliğe de sahip olduğunu söylemiştik.
olay nedir
Öncelikle olayın ne olduğunu öğrenelim.
Olaylar çoğunlukla web tarayıcısında kullanıcı tarafından oluşturulur.
Mobil kullanıcıların ekrana dokunması, web kullanıcılarının fareyi hareket ettirmesi, bir düğmeye tıklaması ve fareyle kaydırma yapması gibi kullanıcı kaynaklı birçok olay tanımlayabiliriz.
JavaScript bir programlama dili olduğundan, program akışımızı gerçekleşen olaylara göre yöneteceğiz.
Tıklama
click() yöntemi
En basit olayla, düğmeye tıklama olayıyla başlayalım.
HTML'deki tıklama olaylarını yönetmek için click() yöntemi kullanılır.
Aşağıdaki sözdizimiyle tıklama olayını dinleyebiliriz.
$(selector).click(handler);
- $(selector) ile hangi öğeyi dinleyeceğimizi seçeriz.
- handler, tıklama gerçekleştiğinde çalışacak geri çağırma işlevini temsil eder.
Bir örnek oluşturalım.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Uyarı
click yöntemi, bağımsız değişken olarak aldığı anonim işlevle düğme tıklamasını yönetir.
Çift tıklama
Fare olayları
Aşağıda kullanıcı tarafından fareyle oluşturulabilecek bazı olaylar yer almaktadır.
Düğmeye tıklayalım!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Fare olayları
Bazı olayların mobil uygulamada test edilemeyeceğini unutmayın; örneğin hover gibi olaylar mobil cihazlarda gerçekleştirilemez!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Klavye olayları
Klavye olayları
Şimdi klavye olaylarının nasıl yönetileceğini öğreneceğiz.
Öncelikle bir input tanımlayalım, ardından bu input tarafından oluşturulacak olayları yönetelim.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Form olayları
jQuery ile formlarda gerçekleşen olayları da yönetebiliriz.
Bir input alanına veri girmek veya select kutusundan seçim yapmak gibi davranışların tümü form olayıdır.
Form olayı örneği
Aşağıdaki kodumuzda birden fazla form olayına örnek verilmiştir.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});window olayları
Son olarak window olaylarına bakalım.
Belki de en önemli window olayı $(document).ready() olayıdır; ancak bu olayı daha önce öğrendiğimiz için diğer window olaylarını ele alacağız.
resize yöntemi
resize() yöntemi
resize yöntemi tarayıcının window nesnesine bağlanır ve pencerenin boyutu değiştiğinde tetiklenir.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});scroll yöntemi
scroll() yöntemi
scroll() yöntemi kaydırılabilir bir öğeye veya window nesnesine bağlanır ve kullanıcı ilgili bileşeni kaydırdığında tetiklenir.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Tebrikler
Tebrikler 🎉
jQuery'de olay yönetimini öğrendik.
Bir sonraki bölümde jQuery ile animasyon oluşturma dersini öğreneceğiz.
Sıkça Sorulan Sorular
“Olay Yönetimi” dersi ücretsiz mi?
Evet — “Olay Yönetimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 1 dersten oluşur.
“Olay Yönetimi” dersinde ne öğreneceğim?
Olay Yönetimi jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Olay Yönetimi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.