Web Geliştiriciler İçin Temel Fare Olayları: Kullanım Alanları ve Pratik Örnekler

 

Tıklama Olayı (click)

Web tarayıcılarında sıklıkla kullanılan tıklama olayı, kullanıcıların belirli bir öğeye tıkladığında tetiklenir. Bu olay, kullanıcı etkileşimini temsil eder ve çeşitli web uygulamalarında butonlara, bağlantılara veya diğer öğelere tıklama işlemiyle ilişkilidir. Tıklama olayının kullanım alanları ve örnek senaryolar üzerinde durulacaktır.

 Çift Tıklama Olayı (dblclick)

Çift tıklama olayı, kullanıcıların belirli bir öğeye çift tıkladığında meydana gelir. Bu olay, özellikle metin veya resim gibi içeriklerin detaylı bir şekilde incelenmesi için kullanışlıdır. Çift tıklama olayının işleyişi ve pratik uygulamalar ele alınacaktır.

Fare Basma ve Bırakma Olayları (mousedown ve mouseup)

Fare düğmelerine basma (mousedown) ve fare düğmesini bırakma (mouseup) olayları, kullanıcının fare düğmeleri üzerindeki etkileşimini izler. Bu olaylar, özellikle sürükle ve bırak gibi işlemlerde önemli bir rol oynar. Bu başlık altında, fare düğmelerine basma ve bırakma olaylarının detaylarına odaklanılacaktır.

 Fare Hareketi Olayı (mousemove)

Fare hareketi olayı, kullanıcının fareyi ekran üzerinde hareket ettirdiği her an tetiklenir. Bu olay, kullanıcının fareyi izleme ve gelişmiş görsel efektler oluşturma açısından önemlidir. Fare hareketi olayının kullanımı ve örnek senaryolar incelenecektir.

Üzerine Gelme ve Ayrılma Olayları (mouseover ve mouseout)

mouseover ve mouseout olayları, kullanıcının fare ile bir öğenin üzerine gelmesi ve üzerinden ayrılması durumlarını yakalar. Bu olaylar, özellikle kullanıcı arayüzlerinde interaktif öğelerin vurgulanması ve gizlenmesi için kullanılır. İlgili konular ve uygulamalar üzerinde derinlemesine bir analiz sunulacaktır.

 İçine Giriş ve Çıkış Olayları (mouseenter ve mouseleave)

mouseenter ve mouseleave olayları, bir öğenin içine girme ve içinden çıkma durumlarını izler. Bu olaylar, iç içe geçmiş öğelerle çalışırken daha kontrollü etkileşim sağlar. İçine giriş ve çıkış olayları üzerinde durulacaktır.

 Sağ Tıklama Menüsü Olayı (contextmenu)

contextmenu olayı, kullanıcının bir öğe üzerinde sağ tıklama yapması durumunda tetiklenir. Bu olay, özel kontekst menülerinin oluşturulması ve kullanıcıya daha fazla seçenek sunma açısından kullanışlıdır. Sağ tıklama menüsü olayının detayları incelenecektir.

Bu makalede, fare olaylarına odaklanarak her bir olayın ne zaman ve nasıl kullanılacağını, ilgi çekici uygulama senaryolarını ve pratik örnekleri ele alarak geniş bir bakış sunulacaktır.

Örnekler:

	------------------------------------------------------------------------------------------------------------------------------------
	1. Tıklama Olayı (click)
	// Belirli bir XPath ile elementi seç
	var clickElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Tıklama olayını simüle et
	clickElement.click();
	------------------------------------------------------------------------------------------------------------------------------------
	2. Çift Tıklama Olayı (dblclick)
	// Belirli bir XPath ile elementi seç
	var dblClickElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Çift tıklama olayını simüle et
	dblClickElement.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
	------------------------------------------------------------------------------------------------------------------------------------
	3. Fare Basma ve Bırakma Olayları (mousedown ve mouseup)
	// Belirli bir XPath ile elementi seç
	var mouseDownUpElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Fare basma olayını simüle et
	mouseDownUpElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
	// Bir süre sonra fare bırakma olayını simüle et
	setTimeout(function() {
	mouseDownUpElement.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
	}, 1000); // 1000 milisaniye (1 saniye) sonra fare bırakma olayı
	------------------------------------------------------------------------------------------------------------------------------------
	4. Fare Hareketi Olayı (mousemove)
	// Belirli bir XPath ile elementi seç
	var moveElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Fare hareketi olayını simüle et
	moveElement.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
	------------------------------------------------------------------------------------------------------------------------------------
	5. Üzerine Gelme ve Ayrılma Olayları (mouseover ve mouseout)
	// Belirli bir XPath ile elementi seç
	var overOutElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Üzerine gelme olayını simüle et
	overOutElement.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
	// Bir süre sonra üzerinden ayrılma olayını simüle et
	setTimeout(function() {
	overOutElement.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
	}, 1000); // 1000 milisaniye (1 saniye) sonra üzerinden ayrılma olayı
	------------------------------------------------------------------------------------------------------------------------------------
	6. İçine Giriş ve Çıkış Olayları (mouseenter ve mouseleave)
	// Belirli bir XPath ile elementi seç
	var enterLeaveElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// İçine giriş olayını simüle et
	enterLeaveElement.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
	// Bir süre sonra içinden çıkış olayını simüle et
	setTimeout(function() {
	enterLeaveElement.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
	}, 1000); // 1000 milisaniye (1 saniye) sonra içinden çıkış olayı
	------------------------------------------------------------------------------------------------------------------------------------
	7. Sağ Tıklama Menüsü Olayı (contextmenu)
	// Belirli bir XPath ile elementi seç
	var contextMenuElement = document.evaluate("//*[@class='gb_d gb_Ea gb_I']", document, null,
	XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
	// Sağ tıklama menüsü olayını simüle et
	contextMenuElement.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }));
	Her bir örnekte, belirtilen XPath ile bir element seçilir ve ardından ilgili fare olayı tetiklenir.
	İstediğiniz olayları ve süreleri özelleştirebilirsiniz.

view raw javascriptevent.js hosted with ❤ by GitHub