on
D3.js Olaylar (Events)
Diğer tüm kütüphanelerde olduğu gibi, D3.js’de de elementlerin olaylarını dinleyebilirsiniz. Bir olay dinleyicisini d3.selection.on() yöntemini kullanarak herhangi bir DOM öğesine bağlayabiliriz. on() yöntemi, seçilen tüm DOM öğelerine bir olay dinleyicisi ekler.
İlk parametre “click”, “mouseover” vb. gibi bir string türüdür. İkinci parametre, bir olay meydana geldiğinde yürütülecek bir fonksiyon ve üçüncü isteğe bağlı parametre capture belirtilebilir. W3C useCapture bayrağı. Aşağıdaki tabloda, önemli olay işleme yöntemi ve nesneleri listelenmektedir.
d3.selection.on(type[, listener[, capture]]);
| Metod | Açıklama |
|---|---|
| selection.on() | click, mouseover, mouseout vb. gibi olayları yakalamak için etkinlik dinleyicileri ekleyin veya kaldırın. |
| d3.event | Zaman damgası gibi standart olay alanlarına erişmek için olay nesnesi veya prevDefault gibi yöntemler |
| d3.mouse(container) | Belirtilen DOM öğesinde geçerli fare konumunun x ve y koordinatlarını alır. |
| d3.touch() | Dokunma koordinatlarını alır |
Örnek:
See the Pen d3.js events by oguzhan (@oguzhaninan) on CodePen.
Özel Olaylar
Standart olaylar dışında istersek kendi olaylarımızı ekleyebiliyoruz. Özel bir olay eklemek için diğerleri gibi bir isim verip .on() fonksiyonuna parametre olarak veriyoruz. Bu olayları tetiklemek için dispatch fonksiyonunu kullanıyoruz. İlk parametre olay ismi ve ikinci opsiyonel parametre olarak veri gönderebiliriz. Gönderilen veriyi olay dinleyici fonksiyon içinde kullanmak için d3.event.detail kullanılır.
d3.selection.dispatch(type[, data]);
Örnek:
See the Pen custom event by oguzhan (@oguzhaninan) on CodePen.