dispatchEvent Metodu

dispatchEvent metodu, bir element üzerinde bir olayı simüle etmeye olanak tanır. Bunun ne işe yaradığı: kullanıcının bir düğmeye tıklamasını, bir formun gönderilme girişimini vb. taklit edebilirsiniz. Bu durumda, olay event.isTrusted özelliği dışında gerçek olandan hiçbir şekilde farklı olmayacaktır. Hatta standart olmayan (sizin tarafınızdan uydurulmuş) isimlere sahip olaylar oluşturabilir ve ardından doğru anda onları tetikleyebilirsiniz. Yöntem, olayın tetiklenmesi gereken öğeye uygulanır. Parametre olarak, yöntem new Event yapıcısı kullanılarak oluşturulmuş bir olayı (nesneyi) alır.

Sözdizimi

element.dispatchEvent(event);

Örnek

Bir düğmemiz olduğunu varsayalım. Bu düğmeye tıklandığında bir mesaj görüntülenir. Fare düğmenin üzerine getirildiğinde, bu düğmenin üzerine tıklandığını düşünmesini sağlayalım:

<button id="button">düğme</button>

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('mesaj');
});

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // bir olay oluştur
	this.dispatchEvent(clickEvent); // düğmeye tıklamayı simüle et
});

Örnek

Kendi olaylarınızı (kendi adınızla) oluşturabilir ve ardından doğru anda onları tetikleyebilirsiniz. Düğmeye bir showMessage olayı bağlayalım ve fare üzerine getirildiğinde bu olayı başlatalım:

<button id="button">düğme</button>

let button = document.querySelector('#button');

button.addEventListener('showMessage', function() {
	alert('mesaj');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // bir olay oluştur
	this.dispatchEvent(showMessageEvent); // olayın tetiklenmesini sağla
});