Temel olarak, javascript'te programlama sırasında, düğmeyi tıklatarak herhangi bir işlevi yaratabileceğimiz bir tür durumla karşı karşıya kalırız. Örneğin bir web sayfasının veya sitenin otomasyon testleri sırasında biraz daha işlevsellik incelememiz gerekiyor. Bu gibi durumlarda, javascript'in tetikleyici tıklama olayı tekniği, belirtilen zorlukların üstesinden gelmek için daha güvenilir ve verimli hale gelir.
Java'da dizeyi int'ye dönüştürün
Bu bağlamda javascript'te tetikleyici tıklama olayı prosedürlerini öğreneceğiz.
Javascript'te click olayını nasıl tetikleyebiliriz:
Javascript'te click olayını tetiklemek için aşağıda verilen teknikleri uygulamamız gerekir:
a) click() yöntemi
b) addEventListener() ve dispathEvent yöntemleri
Şimdi yukarıda yazılan yöntemleri aşağıdakileri göstermek için kullanacağız:
Yöntem 1:
Javascript'te tıklama olayı yöntemini kullanarak tıklama olayını tetikleyin:
Bahsi geçen unsur üzerinde tıklama yöntemi Eylemi gerçekleştirmek için kullanılır. Kullanıcı tanımlı fonksiyonu kullanarak, gerekli butona kullanıcı tarafından tıklandığında butonun oluşturulması, id'sinin alınması ve click olayının tetiklenmesi yardımıyla bu yöntem uygulanabilmektedir.
Daha fazla açıklama için, aşağıda verilen örneği incelemeliyiz:
c# listesi
Örnek:
Aşağıda verilen örnekte sahip 'buraya tıklayın' , üzerindeki click olayına erişmek için id ve click olayıyla birlikte bir düğme oluşturulacaktır;
Click here
Javascript’te id’sini belirterek, document.getElementById metodunda oluşturulan butona erişmemiz gerekiyor. Bir sonraki işlemi gerçekleştirmek için click olayı çağrılacaktır.
const get= document.getElementById('btn'); get.click();
Son olarak butona tıkladığımızda aşağıdaki fonksiyonun çıktısını alacak şekilde tanımlayacağız. 'tıklamaEvent()' bir şekilde konsolda tıklama yöntemini kullanıyor.
function clickEvent() { console.log('now the Click Event is triggered ') } İlgili kodun yukarıdaki çıktısından, tıklama yöntemini otomatik olarak kullanarak, buradaki tıklama butonunun tıklandığını gözlemledik.
Yöntem 2:
AddEventListener() ve dispatchEvent() yönteminin yardımıyla javascript'te click olayını tetikleyin
Javascript'te javascript olay hedefi arayüzünün sağladığı integral yöntemidir.
Bu yöntemle bir olay dinleyicisi kaydedilir. Bahsi geçen olay hedefte yakalandığında yapılandırılmış fonksiyonumuzu çağıracağız.
Olayın sözdizimi:
target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture);
sözdiziminin açıklaması:
- Yukarıdaki sözdiziminde adı verilen bir parametre vardır. $tipi zorunlu bir parametredir. İzlenecek olayın tipini belirten parametreler yalnızca bir diziyi kabul eder. Bu parametre büyük/küçük harfe duyarlı bir parametredir. Klavye, tıklama, veritabanı, giriş vb. gibi çeşitli olaylar onun tarafından desteklenir.
- Aynı şekilde, $dinleyici onun da zorunlu bir parametresidir. Bahsedilen tipte bir olay meydana geldiğinde bu parametre tarafından nesne olarak olaya ilişkin bir bildirim alınır. Javascript işlevinde veya bir Eventlistner arayüzünde bu nesnenin uygulanması gerekir.
- Öte yandan, $seçenek bir isteğe bağlı parametre içinde.
Örnek 1
Open bing const link = document.getElementById('btn'); link.addEventListener('click', e => {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. 'The required event is triggered'. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>'e'</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log('The required event is triggered ') } </pre> <hr></5;> Örnek 2:
Java'da karşılaştırılabilir arayüz
Bu örnekte öncelikle, bir öncekiyle aynı değere sahip, onclick olayı olan, ilgili id'ye sahip bir düğme ekleyeceğiz.
Click here
Daha sonra yardımı ile addEventListener() yöntemini kullanarak düğmeyi alacağız ve içindeki olayı tıklatacağız. 'Bu' olay tıklama nesnesine atıfta bulunan bağımsız değişkeninde.
const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); Son olarak, önceki yöntemle aynı şekilde, click olayı tetiklendiğinde ilgili mesajın içinde görüntülenmesi için click olayını tanımlayacağız.
function clickEvent() { console.log('The required event is triggered ') }