Javascript / Olaylar (Events)Eklenme Şekilleri

2. Sınıf Öğrencileri İçin Sunular 1
5. Sınıf Öğrencileri Için Sunular 13
8. Sınıf Öğrencileri İçin Sunular 23
Belirli Gün Ve Haftalar 1
Bilgisayar Donanımları 5
Bilgisayar Programlama 2
Bilgisayar Yazılım 2
Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
Biyografiler 2
Biyoloji 2
Değerler Eğitimi 4
Eba Elektronik Bilişim Ağı 5
Eğitim-Öğretim Sunuları 3
Felsefe 2
İslam 3
Kelime İşlemci 1
Kişisel Gelişim 4
Kodlama, Robotic 4
Ortak Eğitim Proje Sunuları. 2
Problem Çözme Ve Algoritmalar 3
Proje Nedir? Nasıl Yapılır? 1
Rehberlik 16
Sağlık 3
Savaşlar 1
Scratch 1
Seminerler 3
Sınav Kaygısı 2
Sosyal Bilgiler 1
Sosyal Bilgiler 1
Tarih 1
Ulaşım Araçları 1
Verimli Ders Çalışma 1
Web Araçları 0
Windows İşletim Sistemi 1
Yarışmalar 0

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

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 .

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

16,563 Okunma Henüz yorum yapılmamış 19/11/2024 09:50:05 19/11/2024 09:51:07

Yorumunuzu Ekleyin

Javascriptte Fonksiyonlar Değer Döndüren Ve Değer Döndürmeyen Fonksiyonlar

Fonksiyonlar, functions

58,531 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...

54,974 okuma,

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?

47,531 okuma, 19/11/2024

Alert Confirm Ve Promt

Alert confirm ve promt

47,047 okuma,

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

42,142 okuma,

Alert, Confirm, Prompt

Alert, confirm, prompt

40,493 okuma,

Javascriptin Html İçine Yazılış Biçimleri

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

40,426 okuma, 11/01/2019

Switch - Case Yapısı

Switch - case yapısı

34,785 okuma,

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.

34,032 okuma,

Alert, Confirm, Prompt

Alert,confirm,prompt

31,381 okuma,

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

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

30,509 okuma,

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

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

29,622 okuma,

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

28,844 okuma,

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.

27,751 okuma,

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

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

27,066 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

25,857 okuma,

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

25,137 okuma,

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.

25,030 okuma,

Switch-case

Switch-case yapısı ve örenekte kullanımı.

24,843 okuma,

Javascript String Object Reference

Javascript string object reference

23,824 okuma,

Javascript Nedir?

23,357 okuma,

Javascriptte Döngüler

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

23,348 okuma,

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.

23,173 okuma,

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

23,031 okuma,

Javascript ile Nesne Yönelimli Programlama (OOP with JS)

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

22,556 okuma,