jQuery Mouse Event Nelerdir?

KOGLAK
KOGLAK
Jan 14 · 2 min read

Bir önceki yazılarımda jQuery’ye giriş yapmıştım ve ardından Effectslerinden bahsetmiştim. Diğer ilgili yazılarımı incelemek için: jQuery ile CSS Özellikleri Değiştirme, jQuery ve DOM Yapısı

Bu yazımda ise Mouse Eventlerden bahsedeceğim.

‘click’ event

.login-button isimli sınıf tanımlanmış elemente tıklanma özelliği kazandırır.

Tıklandıktan sonra .login-form isimli sınıfa ait element gösterilir.

$(document).ready(() => {
$('.login-button').on('click', () => {
$('.login-form').show();
})
});

‘mouseenter’ event

Mouse imleci belirtilen elementin üzerine geldiği anda altta yazan metot çalışır. Bu durumda .menu-button isimli sınıfa sahip element üzerine mouse imleci geldiğinde .nav-menu isimli sınıfa sahip olan element gösterilecektir.

$(document).ready(() => {

$('.menu-button').on('mouseenter', () => {
$('.nav-menu').show();
});
});

‘mouseleave’ event

Aşağıdaki durumda ise .nav-menu isimli sınıfa sahip element üzerinden mouse imleci çekildiğinde .nav-menu isimli sınıfa sahip elementler gizlenecektir.

$(document).ready(() => {
$('.menu-button').on('mouseenter', () => {
$('.nav-menu').show()
})

$('.nav-menu').on('mouseleave', () => {
$('.nav-menu').hide()
})
});

‘addClass/removeClass’ event

Aşağıdaki kod ile product-photo sınıfına sahip elementlerin üzerine gelindiğinde resim zoom yapılır, imleç çekildiğinde ise zoom out yapılır.

$(document).ready(() => {
$('.product-photo').on('mouseenter', () => {
$('.product-photo').addClass('photo-active')
}).on('mouseleave', () => {
$('.product-photo').removeClass('photo-active')
})

});

‘keypress/keydown/keyup’ event

keydown klavye tuşuna basıldığı zaman, keyup klavye tuşundan parmak kaldırıldığı zaman, keypress klavye tuşuna basılıyken çalışır.

Aşağıdaki kodta input alanına her karakter girildiğinde i değişkeni 1 arttırılır.

i = 0;
$(document).ready(function(){
$(".post").keypress(function(){
$(".remaining").text(i += 1);
});
});

Örneğin aşağıdaki kodta textarea kısmına klavyeden yazılan her karakter div blokuna yansıtılacaktır. Burada kullanılan event.currentTarget.value() bir dinleyicidir ve işlemin yapıldığı blokun değerini alır. Bu durumda textarea’da işlem yapıldığı için bu değeri alır.

----MAIN.JS TARAFI----$(document).ready(() => {$("#textarea").keypress(function(){
$('.divblock').html($(event.currentTarget).val());
});

})
----HTML TARAFI----<div class="divblock">Sample Font</div>


<textarea name="text" placeholder="Type something here and see what happens..." id="textarea" cols="30" rows="10"></textarea>


</div>

‘btn-hover’ event

Aşağıdaki kod ise btn isimli sınıfa sahip elementin üzerine mouse imleci geldiğinde rengini değiştirir.

$(document).ready(() => {

$('.btn').on('mouseenter', () => {
$('.btn').addClass('btn-hover')
})

});

‘currentTarget’’ event

Yukarıdaki örnekte .product-photo isimli sınıfa sahip birden fazla resim varsa hepsi zoomlanacaktı. Ancak aşağıdaki event.currentTarget ile aynı sınıfa sahip olsalar bile üzerine gelinen resim zoomlanacaktır.

$(document).ready(() => {
$('.product-photo').on('mouseenter', (event) => {
$(event.currentTarget).addClass('photo-active')
}).on('mouseleave', event => {
$(event.currentTarget).removeClass('photo-active')
})
});

Yukarıda jQuery kütüphanesinde tanımlı olan bazı mouse eventları inceledik. Diğer araştırılabilecek metotlar ise dblclick, mousemov olabilir. Ayrıca klavye üzerinden de bazı komutlar verebiliriz: keydown, keypress, keyup şeklinde metotlar da bunun için kullanılmaktadır.

jQAPI , jQuery metotları konusunda alternatif araştırma yapılacak başka bir arama sitesidir. İnceleyebilirsiniz.

More From Medium

Also tagged JavaScript

Also tagged Front End Development

Also tagged Front End Development

Infinite Scroll with Ionic, Angular and Firestore

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade