[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-tiklama-ve-hover-olaylari-icin-js-kodlari-baslangic-seviyesi-ogrenme-rehberi":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},4514,"Tıklama ve Hover Olayları İçin JS Kodları: Başlangıç Seviyesi Öğrenme Rehberi","JavaScript'te tıklama ve hover olaylarını yönetmek için temel JS snippetleri ve kod örnekleri ile nasıl etkinlik dinleyicileri ekleyeceğinizi öğrenin.","\u003Ch1>Tıklama ve Hover Olayları İçin JS Kodları: Başlangıç Seviyesi Öğrenme Rehberi\u003C/h1>\u003Cp>Web geliştirme dünyasında kullanıcı etkileşimlerini yönetmek, dinamik ve kullanıcı dostu arayüzler oluşturmanın temel taşlarından biridir. Bu etkileşimlerin en yaygın olanları \u003Cstrong>tıklama event\u003C/strong> ve \u003Cstrong>hover olayı\u003C/strong>dır. Bu yazımızda, JavaScript kullanarak bu olayları nasıl yakalayabileceğinizi ve yönetebileceğinizi anlatan pratik \u003Cstrong>JS snippet\u003C/strong> ve \u003Cstrong>kod örnekleri\u003C/strong> sunacağız. Ayrıca, bu konudaki \u003Cstrong>öğrenme rehberi\u003C/strong> olarak Başlangıç Seviyesi Kod & Snippet Rehberi'nin sunduğu kaynaklardan da bahsedeceğiz.\u003C/p>\u003Ch2>JavaScript'te Event Listener Nedir?\u003C/h2>\u003Cp>JavaScript'te event listener, bir HTML öğesine belirli bir kullanıcı etkileşimi gerçekleştiğinde çalışacak fonksiyonları bağlamanızı sağlar. Örneğin, bir butona tıklama olduğunda veya fare o öğenin üzerine geldiğinde belirli işlemler yapılabilir. Bu sayede web sayfanız daha interaktif ve kullanıcı dostu hale gelir.\u003C/p>\u003Ch2>\u003Cstrong>Tıklama Event\u003C/strong> Nasıl Yakalanır?\u003C/h2>\u003Cp>Tıklama olayı, kullanıcıların bir öğeye fare ile tıklaması durumunda tetiklenir. JavaScript'te bunu yakalamak için \u003Ccode>addEventListener\u003C/code> metodunu kullanabilirsiniz. İşte basit bir örnek:\u003C/p>\u003Cpre>\u003Ccode>const button = document.querySelector('#myButton');\nbutton.addEventListener('click', function() {\n  alert('Butona tıklandı!');\n});\u003C/code>\u003C/pre>\u003Cp>Bu kodda, \u003Ccode>id\u003C/code>'si \u003Ccode>myButton\u003C/code> olan butona tıklandığında bir uyarı mesajı gösterilir. Bu temel yapı, tıklama eventini yakalamak için en yaygın kullanılan yöntemdir.\u003C/p>\u003Ch2>\u003Cstrong>Hover Olayı\u003C/strong> Nasıl Yönetilir?\u003C/h2>\u003Cp>Hover olayı, kullanıcının fare imlecini bir öğenin üzerine getirmesiyle tetiklenir. JavaScript'te bu olayı yakalamak için \u003Ccode>mouseenter\u003C/code> ve \u003Ccode>mouseleave\u003C/code> eventleri kullanılır. Örnek bir kullanım:\u003C/p>\u003Cpre>\u003Ccode>const box = document.querySelector('.hover-box');\nbox.addEventListener('mouseenter', function() {\n  box.style.backgroundColor = 'lightblue';\n});\nbox.addEventListener('mouseleave', function() {\n  box.style.backgroundColor = '';\n});\u003C/code>\u003C/pre>\u003Cp>Bu kodda, \u003Ccode>hover-box\u003C/code> sınıfına sahip bir öğenin üzerine gelindiğinde arka plan rengi değişir, fare ayrıldığında ise eski haline döner.\u003C/p>\u003Ch2>JS Snippet ve Kod Örnekleri ile Pratik Yapmak\u003C/h2>\u003Cp>JavaScript'te \u003Cstrong>tıklama event\u003C/strong> ve \u003Cstrong>hover olayı\u003C/strong> gibi temel kullanıcı etkileşimlerini öğrenmek için bolca pratik yapmak önemlidir. Aşağıda farklı senaryolar için hazırlanmış bazı kullanışlı \u003Cstrong>JS snippet\u003C/strong> ve \u003Cstrong>kod örnekleri\u003C/strong> bulabilirsiniz:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Butona tıklayınca metin değiştirme:\u003C/strong>\u003Cpre>\u003Ccode>document.querySelector('#changeTextBtn').addEventListener('click', function() {\n  document.querySelector('#text').textContent = 'Metin değişti!';\n});\u003C/code>\u003C/pre>\u003C/li>\u003Cli>\u003Cstrong>Bir öğenin üzerine gelince gizli menüyü gösterme:\u003C/strong>\u003Cpre>\u003Ccode>const menu = document.querySelector('.menu');\nmenu.addEventListener('mouseenter', function() {\n  document.querySelector('.submenu').style.display = 'block';\n});\nmenu.addEventListener('mouseleave', function() {\n  document.querySelector('.submenu').style.display = 'none';\n});\u003C/code>\u003C/pre>\u003C/li>\u003Cli>\u003Cstrong>Bir liste öğesine tıklayınca seçili hale getirme:\u003C/strong>\u003Cpre>\u003Ccode>const items = document.querySelectorAll('.list-item');\nitems.forEach(item => {\n  item.addEventListener('click', function() {\n    items.forEach(i => i.classList.remove('selected'));\n    this.classList.add('selected');\n  });\n});\u003C/code>\u003C/pre>\u003C/li>\u003C/ul>\u003Ch2>Başlangıç Seviyesi Kod & Snippet Rehberi ile Öğrenmenizi Destekleyin\u003C/h2>\u003Cp>JavaScript'te \u003Cstrong>tıklama event\u003C/strong> ve \u003Cstrong>hover olayı\u003C/strong> gibi temel konuları öğrenirken, Başlangıç Seviyesi Kod & Snippet Rehberi'nin sunduğu \u003Cstrong>öğrenme rehberi\u003C/strong> ve \u003Cstrong>kod örnekleri\u003C/strong> size büyük kolaylık sağlar. Bu platform, yeni başlayanlar için sade ve anlaşılır anlatımlarla zengin içerikler sunar. Böylece, pratik yaparak ve örnekleri inceleyerek JavaScript becerilerinizi hızlıca geliştirebilirsiniz.\u003C/p>\u003Ch2>Sonuç\u003C/h2>\u003Cp>Web sayfalarında kullanıcı deneyimini artırmak için \u003Cstrong>tıklama event\u003C/strong> ve \u003Cstrong>hover olayı\u003C/strong> gibi etkileşimleri doğru şekilde yönetmek çok önemlidir. JavaScript'in \u003Ccode>addEventListener\u003C/code> metodu sayesinde bu olayları kolayca yakalayabilir ve istediğiniz işlemleri gerçekleştirebilirsiniz. Yukarıda paylaşılan \u003Cstrong>JS snippet\u003C/strong> ve \u003Cstrong>kod örnekleri\u003C/strong> ile hemen uygulamalı olarak öğrenmeye başlayabilirsiniz. Unutmayın, düzenli pratik ve doğru kaynaklar ile JavaScript'te ustalaşmak mümkündür. Başlangıç Seviyesi Kod & Snippet Rehberi, bu yolculukta size rehberlik edecek değerli bir kaynaktır.","Tıklama ve Hover Olayları İçin JS Kodları - Başlangıç Rehber","JavaScript'te tıklama ve hover olaylarını yönetmek için temel JS snippetleri ve kod örnekleri ile öğrenin.","tiklik event, hover olayi, JS snippet, kod ornekleri, ogrenme rehberi, JavaScript event listener","tiklama-ve-hover-olaylari-icin-js-kodlari-baslangic-seviyesi-ogrenme-rehberi","2025-11-12T05:03:05.000Z",{"id":16,"title":17,"slug":18},209,"JS Event Listener Örnekleri","js-event-listener-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},92,"Burak Demirtaş","CodeMentor","burak-demirtas","/media/blog/d16ffb602b0b548920eb35ec2a7cd597.jpg","/media/blog/d16ffb602b0b548920eb35ec2a7cd597_thumb.jpg","/media/blog/d16ffb602b0b548920eb35ec2a7cd597.webp","/media/blog/d16ffb602b0b548920eb35ec2a7cd597_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,485,0,"3 dk okuma süresi","/blog/js-event-listener-ornekleri/tiklama-ve-hover-olaylari-icin-js-kodlari-baslangic-seviyesi-ogrenme-rehberi",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/d16ffb602b0b548920eb35ec2a7cd597.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-event-listener-ornekleri/tiklama-ve-hover-olaylari-icin-js-kodlari-baslangic-seviyesi-ogrenme-rehberi",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-event-listener-ornekleri/tiklama-ve-hover-olaylari-icin-js-kodlari-baslangic-seviyesi-ogrenme-rehberi",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/burak-demirtas",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,112],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/js-event-listener-ornekleri",{"@type":102,"position":113,"name":7,"item":65},4]