Moving the mouse: mouseover/out, mouseenter/leave

Author: bilgedemirkaya

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -1,140 +1,140 @@
-# Moving: mouseover/out, mouseenter/leave
+# Fare Hareketi: mouseover/out, mouseenter/leave
 
-Let's dive into more details about events that happen when mouse moves between elements.
+Fare öğeler arasında hareket ettiğinde meydana gelen olaylar hakkında daha fazla ayrıntıya girelim.
 
 ## Mouseover/mouseout, relatedTarget
 
-The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
+`mouseover` olayı fare bir ögenin üzerine geldiğinde gerçekleşirken, `mouseout` fare bu ögenin üzerinden gittiği zaman gerçekleşir.
 
 ![](mouseover-mouseout.svg)
 
-These events are special, because they have a `relatedTarget`.
+Bu olaylar özeldir, çünkü `relatedTarget` özellikleri vardır.
 
-This property complements `target`. When a mouse leaves one element for another, one of them becomes `target`, and the other one `relatedTarget`.
+Bu özellik `target`ı (hedefi) tamamlar. Fare bir ögeyi diğer ögeye gitmek için bıraktığında, bunlardan biri `target` (hedef) , diğeri `relatedTarget`(ilişkiliTarget) olur.
 
-For `mouseover`:
+`mouseover` için:
 
-- `event.target` -- is the element where the mouse came over.
-- `event.relatedTarget` -- is the element from which the mouse came (`relatedTarget` -> `target`).
+- `event.target` -- fareyle üzerine gelinen öge
+- `event.relatedTarget` -- farenin hedefe gitmeden önce üzerinde oldugu öge `relatedTarget` (`relatedTarget` -> `target`).
 
-For `mouseout` the reverse:
-
-- `event.target` -- is the element that mouse left.
-- `event.relatedTarget` -- is the new under-the-pointer element, that mouse left for (`target` -> `relatedTarget`).
+ `mouseout` için tam tersi:
+ 
+- `event.target` -- farenin terk ettiği öge.
+- `event.relatedTarget` -- farenin hedefteki ögeyi terk ettikten sonra gittiği öge. (`target` -> `relatedTarget`).
 
 ```online
-In the example below each face feature is an element. When you move the mouse, you can see mouse events in the text area.
+Aşağıdaki örnekte her yüz özelliği bir öğedir. Fareyi hareket ettirdiğinizde, metin alanında fare olaylarını görebilirsiniz.
 
-Each event has the information about where the element came and where it came from.
+Her olay, elementin nereden geldiği ve nereye gittiği hakkında bilgi içerir.
 
 [codetabs src="mouseoverout" height=280]
 ```
 
-```warn header="`relatedTarget` can be `null`"
-The `relatedTarget` property can be `null`.
+```warn header="`relatedTarget` `null` olabilir"
+`relatedTarget` özelliği `null` (boş) olabilir.
 
-That's normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window.
+Bu normaldir ve sadece farenin başka bir elementten değil, pencerenin dışından geldiği anlamına gelir. Ya da pencereden çıktığı anlamına gelir.
 
-We should keep that possibility in mind when using `event.relatedTarget` in our code. If we access `event.relatedTarget.tagName`, then there will be an error.
+Kodumuzda `event.relatedTarget` kullanırken bu olasılığı hesaba katmalıyız.`event.relatedTarget.tagName` özelliğine ulaşırsak, bu hata verebilir.
 ```
 
-## Events frequency
+## Ögeleri atlama
 
-The `mousemove` event triggers when the mouse moves. But that doesn't mean that every pixel leads to an event.
+`mousemove` olayı fare hareket ettiğinde tetiklenir. Ancak bu her piksel bir olayı tetikler anlamına gelmez.
 
-The browser checks the mouse position from time to time. And if it notices changes then triggers the events.
+Tarayıcı farenin konumunu zaman içerisinde kontrol eder. Ve eğer konum değişikliği farekederse, olayı tetikler.
 
-That means that if the visitor is moving the mouse very fast then DOM-elements may be skipped:
+Bu, eğer kullanıcı fareyi çok hızlı hareket ettiriyorsa, bazı DOM ögelerinin atlanabileceği anlamına gelir.
 
 ![](mouseover-mouseout-over-elems.svg)
 
-If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `<div>` (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`.
+Eğer fare `#FROM` ögesinden`#TO` ögesine çok hızlı bir şekilde hareket ederse, ortadaki `<div>` ögeleri (ya da bazıları) atlanabilir. `mouseout` olayı `#FROM` ogesinde ve ardından aniden `#TO` ögesi üzerinde tetiklenir.
 
-In practice that's helpful, because if there may be many intermediate elements. We don't really want to process in and out of each one.
+Bu, performans için iyidir, çünkü arada bir çok öge bulunabilir. Her birinde olay tetiklemeyi her zaman istemeyiz.
 
-On the other hand, we should keep in mind that we can't assume that the mouse slowly moves from one event to another. No, it can "jump".
+Öte yandan, fare ımlecinin yol boyunca tüm öğeleri "ziyaret etmediğini" unutmamalıyız. Bu ögelerin üzerinden "zıplayabilir".
 
-In particular it's possible that the cursor jumps right inside the middle of the page from out of the window. And `relatedTarget=null`, because it came from "nowhere":
+Özellikle, imlecin pencereden sayfanın ortasına doğru atlaması mümkündür. Bu durumda `relatedTarget=null`, olur çünkü imleç "hiçbir yerden" gelmiştir:
 
 ![](mouseover-mouseout-from-outside.svg)
 
 <div style="display:none">
-In case of a fast move, intermediate elements may trigger no events. But if the mouse enters the element (`mouseover`), when we're guaranteed to have `mouseout` when it leaves it.
+Hızlı fare hareketi durumunda, ortadaki elementler olay tetiklemeyebilirler. Ancak eger fare bır element üzerinde (`mouseover`) olayını tetiklediyse, fare ogeden uzaklastıgında `mouseout` olayının tetikleneceğini garantilemiş oluruz.
 </div>
 
 ```online
-Check it out "live" on a teststand below.
+Aşağıdaki test standında "canlı" olarak kontrol edebilirsiniz.
 
-The HTML is two nested `<div>` elements. If you move the mouse fast over them, then there may be no events at all, or maybe only the red div triggers events, or maybe the green one.
+HTML iç içe geçmiş `<div>` ögelerinden oluşuyor. Eğer farenizi onların üzerinden hızlıca hareket ettirirseniz, hiç bir olay tetiklenmeyebilir, belki sadece kırmızı div olay tetikleyebilir ya da sadece yeşil div tetikleyebilir.
 
-Also try to move the pointer over the red `div`, and then move it out quickly down through the green one. If the movement is fast enough then the parent element is ignored.
+Ayrıca, fareyi kırmızı "div" nin üzerine getirmeyi deneyin ve ardından hızlıca yeşil olandan aşağı doğru hareket ettirin. Hareket yeterince hızlıysa, ana öğe göz ardı edilir.
 
 [codetabs height=360 src="mouseoverout-fast"]
 ```
 
-## "Extra" mouseout when leaving for a child
+## Çocuk öge için ayrılırken "Ekstra" mouseout olayı
 
-Imagine -- a mouse pointer entered an element. The `mouseover` triggered. Then the cursor goes into a child element. The interesting fact is that `mouseout` triggers in that case. The cursor is still in the element, but we have a `mouseout` from it!
+Fareyle bir elementin üzerine geldiğinizi düşünün. `mouseover` olayı tetiklendi. Daha sonra fare imleci iç içe geçmiş çocuk elementin üzerine gittiğini varsayalım. İlginç olarak `mouseout` olayı tetiklenir. Fare imleci teknik olarak hala elementin üzerinde, ancak biz buradan ekstra bir `mouseout` olayı çıkarmış olduk.
 
 ![](mouseover-to-child.svg)
 
-That seems strange, but can be easily explained.
+Bu ilginç görünebilir ancak kolayca açıklanabilir bir durumdur.
 
-**According to the browser logic, the mouse cursor may be only over a *single* element at any time -- the most nested one (and top by z-index).**
+**Tarayıcı mantığına göre, fare imleci herhangi bir zamanda yalnızca *tek* bir öğenin üzerinde olabilir - en içte olanı seçer ( z-endeksi en yüksek olanı yani en üstte olanı).**
 
-So if it goes to another element (even a descendant), then it leaves the previous one. That simple.
+Yani başka bir öğeye giderse (aynı ögeye baglı bıle olsa), o zaman bir öncekinden ayrılmış kabul edilir. Bu kadar basit.
 
-There's a funny consequence that we can see on the example below.
+Buradan aşağıdaki örnekte görebileceğimiz komik bir sonuç çıkar.
 
-The red `<div>` is nested inside the blue one. The blue `<div>` has `mouseover/out` handlers that log all events in the textarea below.
+Kırmızı `<div>` mavi olanın içine konmuştur. Mavi `<div>` `mouseover/out` olayı tetiklendiği zamanlarda aşağıdaki metin alanına yazan bir şekilde kodlanmıştır.
 
-Try entering the blue element and then moving the mouse on the red one -- and watch the events:
+Mavi öğeye girip fareyi kırmızı öğenin üzerine getirmeyi deneyin ve olayları izleyin:
 
 [codetabs height=360 src="mouseoverout-child"]
 
-1. On entering the blue one -- we get `mouseover [target: blue]`.
-2. Then after moving from the blue to the red one -- we get `mouseout [target: blue]` (left the parent).
-3. ...And immediately `mouseover [target: red]`.
+1. Mavi ogeye girerken -- `mouseover [target: blue]` olayı tetiklenir.
+2. TMavi olandan kırmızı olana hareket ettikten sonra -- `mouseout [target: blue]` olayı tetiklenir.
+3. ...Ve aniden `mouseover [target: red]`.
 
-So, for a handler that does not take `target` into account, it looks like we left the parent in `mouseout` in `(2)` and returned back to it by `mouseover` in `(3)`.
+Bu nedenle, "hedef" i hesaba katmayan bir kod için, "(2)" öğesinde "mouseout" öğesinde üstteki ögeyi bıraktık ve "(3)" öğesinde "mouseover" ile ona geri döndük gibi görünüyor.
 
-If we perform some actions on entering/leaving the element, then we'll get a lot of extra "false" runs. For simple stuff that may be unnoticeable. For complex things that may bring unwanted side-effects.
+Sonuç olarak öğeye girme / öğeden çıkma konusunda bazı eylemler gerçekleştirir, sadece bunları hesaba katarak bir yazılım geliştirirsek birçok ekstra "yanlış" sonuç elde edebiliriz.
 
-We can fix it by using `mouseenter/mouseleave` events instead.
+Bu sorunu `mouseenter/mouseleave` olaylarını kullanarak düzeltebiliriz.
 
-## Events mouseenter and mouseleave
+## mouseenter and mouseleave olayları
 
-Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They also trigger when the mouse pointer enters/leaves the element.
+`mouseenter/mouseleave` olayları `mouseover/mouseout` olaylarına benzer şekilde çalışır. Bunlar da imleç bir ögenin üzerine geldiğinde/ ayrıldığında tetiklenir.
 
-But there are two differences:
+Ancak iki fark vardır:
 
-1. Transitions inside the element are not counted.
-2. Events `mouseenter/mouseleave` do not bubble.
+1. Elementin içindeki imleç hareketi sayılmaz.
+2. `mouseenter/mouseleave` olay kabarcıklanması (bubble) yapmaz.
 
-These events are intuitively very clear.
+Bu olaylar sezgisel olarak çok açık.
 
-When the pointer enters an element -- the `mouseenter` triggers, and then doesn't matter where it goes while inside the element. The `mouseleave` event only triggers when the cursor leaves it.
+İmleç bir elementin üzerine geldiği zaman -- `mouseenter` tetiklenir, ve bu elementin içinde nereye hareket ettiği önem taşımaz. `mouseleave` olayı ancak imleç o elementten tamamen ayrıldığı zaman tetiklenir.
 
-If we make the same example, but put `mouseenter/mouseleave` on the blue `<div>`, and do the same -- we can see that events trigger only on entering and leaving the blue `<div>`. No extra events when going to the red one and back. Children are ignored.
+Eğer aynı örneği verecek olursak, `mouseenter/mouseleave` olayını mavi `<div>` üzerinde denersek, aynı hareketi yaptığımız zaman-- olayların sadece `<div>` ögesinden girişte ve çıkışta tetiklendiğini görürüz. Ekstra olarak kırmızı olana giriş çıkışta olay tetiklenmez. İç içe geçmiş çocuk elementler göz ardı edilir.
 
 [codetabs height=340 src="mouseleave"]
 
-## Event delegation
+## Olay delegasyonu (Event delegation)
 
-Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them.
+`mouseenter/leave` olaylarının kullanımı çok basittir. Ancak kabarcıklanma (bubble) yapmazlar. Bu yüzden bu olaylarla olay delegasyonu yapamayız.
 
-Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells.
+Tablo hücreleri için fare giriş / çıkışını işlemek istediğimizi hayal edin. Ve yüzlerce hücre var.
 
-The natural solution would be -- to set the handler on `<table>` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on `<td>`, then only a handler on that `<td>` can catch it.
+Doğal çözüm - işleyiciyi "<table>" a ayarlamak ve oradaki olayları işlemek olacaktır. Ancak "fare gir / bırak" kabarma yapmayacak. Yani eğer böyle bir olay "<td>" üzerinde meydana gelirse, o zaman sadece "<td>" üzerindeki bir işleyici onu yakalayabilir.
 
-Handlers for `mouseenter/leave` on `<table>` only trigger on entering/leaving the whole table. It's impossible to get any information about transitions inside it.
+`<table>` üzerindeki, `mouseenter/leave` işleyicileri sadece bütün tabloya girerken/ayrılırken tetiklenir. Tablo içinde olan hareketleri takip etmek imkansızdır.
 
-Not a problem -- let's use `mouseover/mouseout`.
+Bu problem değil -- `mouseover/mouseout` kullanabiliriz.
 
-A simple handler may look like this:
+Basit bir işleyici şöyle görünebilir:
 
 ```js
-// let's highlight cells under mouse
+// farenin geçtiği hücreleri ışıklandıralim
 table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
@@ -150,38 +150,41 @@ table.onmouseout = function(event) {
 [codetabs height=480 src="mouseenter-mouseleave-delegation"]
 ```
 
-These handlers work when going from any element to any inside the table.
+Bu işleyiciler, herhangi bir öğeden tablonun içindeki herhangi bir diğer ogeye giderken çalışır.
 
-But we'd like to handle only transitions in and out of `<td>` as a whole. And highlight the cells as a whole. We don't want to handle transitions that happen between the children of `<td>`.
+Ancak biz `<td>` ogelerinin, yalnızca içeri ve dışarı geçişlerini ele almak istiyoruz. Ve hücreleri bir bütün olarak ışıklandırmak istiyoruz.  Hücrenin içi veya herhangi bir hücrenin dışı gibi diğer geçişler bizi ilgilendirmez. Onları filtreleyebiliriz.
 
-One of solutions:
+Çözümlerden biri:
 
-- Remember the currently highlighted `<td>` in a variable.
-- On `mouseover` -- ignore the event if we're still inside the current `<td>`.
-- On `mouseout` -- ignore if we didn't leave the current `<td>`.
+- Bir değişkende şu anda ışıklandırılmış `<td>` elementini hatırlayalim. Buna `currentElem` diyelim .
+- `mouseover` olayı  -- eğer hala `currentElem` içindeysek olayı gözardı et.
+- `mouseout` olayı -- eğer hala `currentElem` ter etmediysek olayı gözardı et.
 
-That filters out "extra" events when we are moving between the children of `<td>`.
+Bu, "<td>" nin çocukları arasında hareket ettiğimizde "ekstra" olayları filtreler.
 
 ```offline
 The details are in the [full example](sandbox:mouseenter-mouseleave-delegation-2).
 ```
 
 ```online
-Here's the full example with all details:
+Bütün detaylarıyla bir örnek verecek olursak:
 
 [codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
 
-Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only `<td>` as a whole is highlighted unlike the example before.
+İmleci tablo hücrelerinin içine, dışına ve içlerine taşımaya çalışın. Hızlı veya yavaş olamsı önemli değil. Önceki örnekten farkı burada yalnızca "<td>" nin bir bütün olarak ışıklandırılmış olmasıdır.
+
 ```
 
 
 ## Summary
 
-We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
+`mouseover`, `mouseout`, `mousemove`, `mouseenter` ve `mouseleave` olaylarını inceledik.
+
+Not edilmesi gerekenler:
+
+- Hızlı imleç hareketi `mouseover, mousemove, mouseout` olaylarının ortadaki elementleri atlamasına sebep olabilir.
+- `mouseover/out` ve `mouseenter/leave` olaylarının ekstra bir hedef özelliği vardir: `relatedTarget`. Bu `target` özelliğini tamamlayıcı olarak işlev görür.
 
-Things that are good to note:
+-  `mouseover/out` olayları anne elementten çocuk elemente hareket ettiğimizde dahi tetiklenir. Tarayıcı bir imlecin aynı anda sadece bir elementin üstünde olabileceğini varsayar -- en içteki olanın üzerinde.
 
-- A fast mouse move can make `mouseover, mousemove, mouseout` to skip intermediate elements.
-- Events `mouseover/out` and `mouseenter/leave` have an additional target: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`.
-- Events `mouseover/out` trigger even when we go from the parent element to a child element. They assume that the mouse can be only over one element at one time -- the deepest one.
-- Events `mouseenter/leave` do not bubble and do not trigger when the mouse goes to a child element. They only track whether the mouse comes inside and outside the element as a whole.
+- `mouseenter/leave` olayalrı kabarcık (bubble) yapmaz ve imleç içteki çocuk elementin üzerine gittiğinde tetiklenmez. Sadece imlecin elementin tamamı üzerine girip / ayrılması ile tetiklenirler, diğer öge içinde hareketleri göz ardı ederler.