Olaylar (Events)Eklenme Şekilleri

JavaScript için olay nedir? Kullanıcının sayfa üzerinde yaptığı her türlü işlem olaydır.Sayfayı açmak, bir nesnenin üzerine tıklamak, fareyle bir nesnenin üzerine gelmek, bir tuşa basmak, bir değeri değiştirmek.Bunların hepsi bir olaydır.HTML nesneleridir ve küçük harfle veya büyük harfle yazılmalarında sakınca yoktur
Olaylar (Events)Eklenme Şekilleri
Olay (Event) İşleme (Genel bakış)

Olaylar, tarayıcı veya işletim sistemi ortamındaki değişiklikleri bildiren tarayıcı penceresi içinde tetiklenen sinyallerdir. Programcılar , bir olay tetiklendiğinde çalışacak ve web sayfalarının değişikliğe uygun şekilde yanıt vermesini sağlayacak olay işleyici kodu oluşturabilir .

Bu sayfa olaylar ve olay işleyicileriyle nasıl çalışılacağına dair çok kısa bir "hatırlatma" sağlar. Yeni geliştiriciler bunun yerine Introduction to events'ı okumalıdır .

Hangi Etkinlikler (Event) Mevcut?

Olaylar, bunları yayan JavaScript nesnelerinin sayfalarında ve/veya altında belgelenmiştir. Örneğin, tarayıcı penceresinde veya geçerli belgede tetiklenen olayları bulmak için Windowve içindeki olaylar bölümlerine bakın Document.

Animasyon, medya vb. gibi belirli API'ler için hangi JavaScript nesnelerinin olayları tetiklediğini bulmak için Olay referansını kullanabilirsiniz .

Olay İşleyicilerini Kaydetme

İşleyicileri kaydetmek için önerilen iki yaklaşım vardır. Olay işleyicisi kodu, bir olay tetiklendiğinde hedef öğenin karşılık gelen onevent özelliğine atanarak veya işleyiciyi yöntem kullanılarak öğe için bir dinleyici olarak kaydederek çalıştırılabilir . Her iki durumda da işleyici arayüze (veya türetilmiş bir arayüzeaddEventListener() ) uyan bir nesne alacaktır . Temel fark, olay dinleyicisi yöntemleri kullanılarak birden fazla olay işleyicisinin eklenebilmesi (veya kaldırılabilmesi)dir.Event

Uyarı: HTML onevent özniteliklerini kullanarak olay işleyicileri ayarlamak için üçüncü bir yaklaşım önerilmez! İşaretlemeyi şişirir ve daha az okunabilir ve hata ayıklaması daha zor hale getirir. Daha fazla bilgi için bkz. Satır içi olay işleyicileri .

<button onkeyup="FonksiyonAdi()">

   

object.onkeyup = function(){myScript};

   

object.addEventListener("keyup", FonksiyonAdi);

 

object.addEventListener("keyup", function() {

});

 

Onevent Özelliklerini Kullanma

Sözleşmeye göre, olayları tetikleyen JavaScript nesnelerinin karşılık gelen "onevent" özellikleri vardır (olay adına "on" öneki eklenerek adlandırılır). Bu özellikler, olay tetiklendiğinde ilişkili işleyici kodunu çalıştırmak için çağrılır ve ayrıca doğrudan kendi kodunuz tarafından çağrılabilir.

Olay işleyicisi kodunu ayarlamak için onu uygun onevent özelliğine atayabilirsiniz. Bir öğedeki her olay için yalnızca bir olay işleyicisi atanabilir. Gerektiğinde işleyici, aynı özelliğe başka bir işlev atayarak değiştirilebilir.

Aşağıda, özelliği kullanarak olay greet()için basit bir fonksiyonun nasıl ayarlanacağını gösteriyoruz .clickonclick

 

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

 

Olayı temsil eden bir nesnenin olay işleyicisine ilk argüman olarak geçirildiğine dikkat edin. Bu olay nesnesi arayüzü uygular veya arayüzden türetilir Event.

EventTarget.addEventListener

Bir öğeye olay işleyicisi ayarlamanın en esnek yolu, yöntemini kullanmaktır EventTarget.addEventListener. Bu yaklaşım, bir öğeye birden fazla dinleyicinin atanmasına ve gerektiğinde dinleyicilerin kaldırılmasınaEventTarget.removeEventListener (kullanılarak ) olanak tanır.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);

 

Yöntem ayrıca olayların nasıl yakalanıp kaldırılacağına ilişkin yönleri kontrol etmek için ek argümanlar/seçenekler de alabilir. Daha fazla bilgi referans sayfasında bulunabilir EventTarget.addEventListener.

Bir İptal Sinyali Kullanma

Dikkat çekici bir olay dinleyicisi özelliği, aynı anda birden fazla olay işleyicisini temizlemek için bir iptal sinyali kullanma yeteneğidir.

Bu , birlikte kaldırmak istediğiniz tüm olay işleyicileri için çağrıya aynı şeyi geçirerek yapılır. Daha sonra 'a sahip olan denetleyiciyi çağırabilirsiniz AbortSignalve bu , o sinyalle eklenen tüm olay işleyicilerini kaldıracaktır. Örneğin, şunu kullanarak kaldırabileceğimiz bir olay işleyicisi eklemek için :addEventListener()abort()AbortSignalAbortSignal

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // pass an AbortSignal to this handler

 

  Daha sonra yukarıdaki kodla oluşturulan olay işleyicisi şu şekilde kaldırılabilir:

controller.abort(); // removes any/all event handlers associated with this controller

 

Windows.onload'ı  kullanmak

Kullanmanın bir yolu windows.onload :

window.onload = function() {
        // Code to be executed after the page has loaded
        console.log("Page loaded!");
    };

 

Bu yaklaşımı kullanırken, yeni bir işlev atadığınızda, bunu not etmek önemlidir.windows.onload Yine, bir öncekinin üzerine yazacak. Bu, sadece son atanacak fonksiyonun yürütüleceği anlamına gelir.

Window.adEventListener'ı kullanmak

window.addEventListener("load", function() {
        // Code to be executed after the page has loaded
        console.log("Page loaded!");
    });

Olay tetiklenir, bu da sayfa tamamen yüklendikten sonra gerçekleşir.


Kaynak

 

 

17,884 Okunma Yorum yapılmamış 19/11/2024 09:50:05 19/11/2024 09:51:07

/ Yorumunuzu Ekleyin
Görsel Liste
Javascriptte Fonksiyonlar Değer Döndüren Ve Değer Döndürmeyen Fonksiyonlar

Fonksiyonlar, functions

60,742 okuma,

Javascriptte Fonksiyonlar Değer Döndüren Ve Değer Döndürmeyen Fonksiyonlar
Degişken Tanımlama Ve Operatörler

Degişken tanımlama ,operatörler vb...

57,268 okuma,

Degişken Tanımlama Ve Operatörler
Javascript Nedir?

Javascripte başlamadan önce bilinmesi gerekenler, java ve javascript aynı mıdır?, javascript ne yapabilir, javascriptin tarihçesi, javascript harf duyarlı mıdır?

50,220 okuma, 19/11/2024

Javascript Nedir?
Alert Confirm Ve Promt

Alert confirm ve promt

49,531 okuma,

Alert Confirm Ve Promt
If, Else If , Kısa Karşılaştırma Operatörü

44,526 okuma,

If, Else If , Kısa Karşılaştırma Operatörü
Alert, Confirm, Prompt

Alert, confirm, prompt

42,768 okuma,

Alert, Confirm, Prompt
Javascriptin Html İçine Yazılış Biçimleri

Javascriptin html içine yazılış biçimleri

42,689 okuma, 11/01/2019

Javascriptin Html İçine Yazılış Biçimleri
Düzenli İfadeler Ve Regexp Nesnesi

Düzenli ifadeler, karakter dizilerini karşılaştırmak, ayırmak/bölmek, sıralamak ve biçimlendirmek gibi işlemler için kullanılan kurallı stenografik sistemlerdir.

37,154 okuma, 25/02/2025

Düzenli İfadeler Ve Regexp Nesnesi
Switch - Case Yapısı

Switch - case yapısı

37,028 okuma,

Switch - Case Yapısı
Alert, Confirm, Prompt

Alert,confirm,prompt

33,549 okuma,

Alert, Confirm, Prompt
Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in

Javascriptte döngüler for, while, do-while, break, continue, for-in

32,760 okuma,

Javascriptte Döngüler For, While, Do-while, Break, Continue, For-in
Javascriptte Döngüler

Javascriptte döngüler for, while, do-while, break, continue, for-in

32,444 okuma, 24/12/2024

Javascriptte Döngüler
Tarih-saat İşlemleri

Bu sayfada zaman yöntem kodları üzerinde duracağız. Bu kodlar zaman birimlerini ifade etmekte, nesneleri zamana göre sıralamakta ve sorgulamakta kullanılır

31,493 okuma, 10/12/2024

Tarih-saat İşlemleri
The Event Object

The event object is a very useful addition to the dom (document object model). The dom contains many objects that store a variety of information about the browser, the computer running the browser, visited urls, and so on. The event object stores data about events.

30,401 okuma,

The Event Object
İf, Else İf , Kısa Karşılaştırma Operatörü

İf, else if , kısa karşılaştırma operatörü

29,244 okuma,

İf, Else İf , Kısa Karşılaştırma Operatörü
Değişken Tanımlamaları, Operatörler

Değişken tanımlamaları, operatörler

28,144 okuma,

Değişken Tanımlamaları, Operatörler
Regular Expression - Düzenli İfadeler

Düzenli ifadeler (regular expressions veya kIsaca RegExp) herhangi bir karakter diziliminin yapIsInI yani iÇerdi?i karakterlerin neler oldu?u ile bunlarIn dizili? sIrasI (konumlarI) ve biÇimlerinin Önceden tanImlanan belli bir biÇime uyumunun denetlenmesi/sInanmasI sIrasInda kullanIlan standart gÖsterim biÇimleri ya da denetim ?ablonlarIdIr.DÜzenli ifadelerin kullanIlmasI ile sa?lanan en Önemli kolaylIk karakter dizimlerinde bulunan karakterlerin Önceden bilinen belli bir desenine uygun olup olmadI?InI sInama/deneme yetene?inden gelmektedir

28,073 okuma, 25/02/2025

Regular Expression - Düzenli İfadeler
Düğüm ( Node )

Düğüm, dom içindeki en temel nesne tipidir. Aslında, bu makalenin sonraki kısımlarında da göreceğiniz gibi, dom ile tanımlanan neredeyse her nesne düğüm nesnesini genişletir. Ancak, semantikle ilgili daha ileri aşamalara geçmeden önce, bir düğümün temsil ettiği kavramı anlamanız gerekir; daha sonra, düğümün gerçek özelliklerini ve yöntemlerini öğrenmek sizin için çok kolay olacaktır.

27,437 okuma,

Düğüm ( Node )
Javascript String Object Reference

String nesneleri üzerinde yapılan değişikliklerdir. Özellikler ve Metodlar şeklinde incelenir.

26,170 okuma, 22/10/2025

Javascript String Object Reference
Javascript Dates-the Complete Reference

Of all the core javascript objects, ı find dates to be the most fascinating. Once you learn a few small tricks everything about javascript dates just seem to fall into place and you find that there's really nothing at all that you can't do with them, quickly, and easily. This reference will cover the javascript date object, how it stores dates, how you can manipulate them, create calendars, countdown timers, prototype them to add your own functionality, as well as provide a complete method reference.

26,015 okuma,

Javascript Dates-the Complete Reference
Javascript ile Nesne Yönelimli Programlama (OOP with JS)

Bu makalede Javascript'le ilgili olarak JSON, function pointer ve OOP konuları ele alınıyor

25,885 okuma, 11/03/2025

Javascript ile Nesne Yönelimli Programlama (OOP with JS)
Javascriptte Döngüler

For, while, do-while, break, continue, for-in

25,566 okuma,

Javascriptte Döngüler
Javascript Nedir?

25,462 okuma,

Javascript Nedir?
Object-Oriented Javascript

Nesne Tabanlı Javascript mantığını anlatan ingilizce bir makale

24,774 okuma,

Object-Oriented Javascript
Try Catch Yapısında Throw Durumu

Try-Catch denetim yapısı hataları yakalamak için kullanılmaktadır. Try bölümünde bir hata bulunursa, o hata ile ilgili bilgiyi catch bölümüne atar. Eğer içi içe try-catch kullanılıyorsa bir önceki try-catch yapısına hatayı fırlatmak için throw kullanılır. Throw’dan fırlatılan hata bir dıştaki catch tarafından tekrar tutulur.

24,772 okuma, 04/03/2025

Try Catch Yapısında Throw Durumu
Event Fonksiyonu

JavaScript ile bir fonksiyon yazdım ve başka yerlerden bu fonsiyonu çağırdım. Ancak, fonksiyona gelen isteğin, hangi nesneden geldiğini öğrenmek için, yeni bir parametre tanımlamak zorunda kaldım

24,765 okuma,

Event Fonksiyonu
Try - Catch Yapısı

24,612 okuma,

Try - Catch Yapısı
Javascriptte Olaylar (events) ve Örnekler

Desteklenen olaylar listesi

24,408 okuma, 15/10/2024

Javascriptte Olaylar (events) ve Örnekler
document Nesnesi

Doküman (document) nesnesi HTML dokümanının tamamını ifade etmektedir ve HTML'de kullandığımız , , , vb. gibi tüm komutları içerir. Doküman nesnesini HTML'deki bölümü olarak düşünebilirsiniz

23,153 okuma,

document Nesnesi
Javascriptte Olaylar Events Desteklenen Olaylar Listesi

Javascriptte olaylar events desteklenen olaylar listesi

22,933 okuma,

Javascriptte Olaylar Events Desteklenen Olaylar Listesi
Yükleniyor...
Yükleniyor...