initial commit

3 files changed, 1217 insertions, 0 deletions

diff --git a/files/tr/web/api/eventtarget/addeventlistener/index.html b/files/tr/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..10d3da4d1a
--- /dev/null
+++ b/files/tr/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,774 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+translation_of: Web/API/EventTarget/addEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">{{domxref("EventTarget")}} yöntemi olan <code>addEventListener()</code>, belli bir olay hedefteki elemana ulaştığında çağırılmak üzere bir fonksiyon ayarlar. </span>{{domxref("Element")}}, {{domxref("Document")}}, ve {{domxref("Window")}} en yaygın hedefler olmakla beraber, olayları destekleyen diğer nesneler de olabilir (mesela {{domxref("XMLHttpRequest")}}).</p>
+
+<p><code>addEventListener()</code> belirli bir olayın dinleyicileri listesine,  {{domxref("EventListener")}}'i uygulayabilecek bir fonksiyon ya da nesne ekleyerek çalışır. Olay gerçekleştiğinde bu fonksiyon ya da nese çağırılır.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>options</var>]);
+<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>]);
+<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>, <var>wantsUntrusted</var> {{Non-standard_inline}}]); // Sadece Gecko/Mozilla</pre>
+
+<h3 id="Parametreler">Parametreler</h3>
+
+<dl>
+ <dt><code><var>type</var></code></dt>
+ <dd>Dinlenecek olan <a href="/en-US/docs/Web/Events">olay tipini</a> belirten, büyük küçük harfe duyarlı dizi</dd>
+ <dt><code><var>listener</var></code></dt>
+ <dd>The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or a JavaScript <a href="/en-US/docs/JavaScript/Guide/Functions">function</a>. See {{anch("The event listener callback")}} for details on the callback itself.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>An options object specifies characteristics about the event listener. The available options are:</p>
+
+ <dl>
+  <dt><code><var>capture</var></code></dt>
+  <dd>A {{jsxref("Boolean")}} indicating that events of this type will be dispatched to the registered <code>listener</code> before being dispatched to any <code>EventTarget</code> beneath it in the DOM tree.</dd>
+  <dt><code><var>once</var></code></dt>
+  <dd>A {{jsxref("Boolean")}} indicating that the <code><var>listener</var></code> should be invoked at most once after being added. If <code>true</code>, the <code><var>listener</var></code> would be automatically removed when invoked.</dd>
+  <dt><code><var>passive</var></code></dt>
+  <dd>A {{jsxref("Boolean")}} that, if <code>true</code>, indicates that the function specified by <code><var>listener</var></code> will never call {{domxref("Event.preventDefault", "preventDefault()")}}. If a passive listener does call <code>preventDefault()</code>, the user agent will do nothing other than generate a console warning. See {{anch("Improving scrolling performance with passive listeners")}} to learn more.</dd>
+  <dt>{{non-standard_inline}} <code><var>mozSystemGroup</var></code></dt>
+  <dd>A {{jsxref("Boolean")}} indicating that the listener should be added to the system group. Available only in code running in XBL or in the {{glossary("chrome")}} of the Firefox browser.</dd>
+ </dl>
+ </dd>
+ <dt><code><var>useCapture</var></code> {{optional_inline}}</dt>
+ <dd>A {{jsxref("Boolean")}} indicating whether events of this type will be dispatched to the registered <code><var>listener</var></code> <em>before</em> being dispatched to any <code>EventTarget</code> beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> and <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> for a detailed explanation. If not specified, <code><var>useCapture</var></code> defaults to <code>false</code>.</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the <code><var>useCapture</var></code> parameter.</div>
+
+ <div class="note"><strong>Note:</strong> <code><var>useCapture</var></code> has not always been optional. Ideally, you should include it for the widest possible browser compatibility.</div>
+ </dd>
+ <dt><code><var>wantsUntrusted</var></code> {{Non-standard_inline}}</dt>
+ <dd>A Firefox (Gecko)-specific parameter. If <code>true</code>, the listener receives synthetic events dispatched by web content (the default is <code>false</code> for browser {{glossary("chrome")}} and <code>true</code> for regular web pages). This parameter is useful for code found in add-ons, as well as the browser itself.</dd>
+</dl>
+
+<h3 id="Döndürülen_değer">Döndürülen değer</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Kullanım_Notları">Kullanım Notları</h2>
+
+<h3 id="Olay_dinleyicisi_callbacki">Olay dinleyicisi callback'i</h3>
+
+<p>The event listener can be specified as either a callback function or an object that implements {{domxref("EventListener")}}, whose {{domxref("EventListener.handleEvent()", "handleEvent()")}} method serves as the callback function.</p>
+
+<p>The callback function itself has the same parameters and return value as the <code>handleEvent()</code> method; that is, the callback accepts a single parameter: an object based on {{domxref("Event")}} describing the event that has occurred, and it returns nothing.</p>
+
+<p>For example, an event handler callback that can be used to handle both {{event("fullscreenchange")}} and {{event("fullscreenerror")}} might look like this:</p>
+
+<pre class="brush: js notranslate">function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* handle a full screen toggle */
+  } else /* fullscreenerror */ {
+    /* handle a full screen toggle error */
+  }
+}</pre>
+
+<h3 id="Güvenli_bir_şekilde_option_desteğini_fark_etmek">Güvenli bir şekilde option desteğini fark etmek</h3>
+
+<p>In older versions of the DOM specification, the third parameter of <code>addEventListener()</code> was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.</p>
+
+<p>Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.</p>
+
+<p>For example, if you want to check for the <code><var>passive</var></code> option:</p>
+
+<pre class="brush: js notranslate">let passiveSupported = false;
+
+try {
+  const options = {
+    get passive() { // This function will be called when the browser
+                    //   attempts to access the passive property.
+      passiveSupported = true;
+      return false;
+    }
+  };
+
+  window.addEventListener("test", null, options);
+  window.removeEventListener("test", null, options);
+} catch(err) {
+  passiveSupported = false;
+}
+</pre>
+
+<p>This creates an <code><var>options</var></code> object with a getter function for the <code><var>passive</var></code> property; the getter sets a flag, <code><var>passiveSupported</var></code>, to <code>true</code> if it gets called. That means that if the browser checks the value of the <code><var>passive</var></code> property on the <code><var>options</var></code> object, <code><var>passiveSupported</var></code> will be set to <code>true</code>; otherwise, it will remain <code>false</code>. We then call <code>addEventListener()</code> to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. Then, we call <code>removeEventListener()</code> to clean up after ourselves. (Note that <code>handleEvent()</code> is ignored on event listeners that aren't called.)</p>
+
+<p>You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.</p>
+
+<p>Then, when you want to create an actual event listener that uses the options in question, you can do something like this:</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Here we're adding a listener for the {{event("mouseup")}} event on the element <code>someElement</code>. For the third parameter, if <code>passiveSupported</code> is <code>true</code>, we're specifying an <code>options</code> object with <code>passive</code> set to <code>true</code>; otherwise, we know that we need to pass a Boolean, and we pass <code>false</code> as the value of the <code>useCapture</code> parameter.</p>
+
+<p>If you'd prefer, you can use a third-party library like <a href="https://modernizr.com/docs">Modernizr</a> or <a href="https://github.com/rafrex/detect-it">Detect It</a> to do this test for you.</p>
+
+<p>You can learn more from the article about <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> from the <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p>
+
+<h2 id="Örnekler">Örnekler</h2>
+
+<h3 id="Basit_bir_dinleyici_ekleme">Basit bir dinleyici ekleme</h3>
+
+<p>This example demonstrates how to use <code>addEventListener()</code> to watch for mouse clicks on an element.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu
+function modifyText() {
+  const t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Tabloya olay dinleyicisi ekleme
+const el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>In this code, <code>modifyText()</code> is a listener for <code>click</code> events registered using <code>addEventListener()</code>. A click anywhere in the table bubbles up to the handler and runs <code>modifyText()</code>.</p>
+
+<h4 id="Sonuç">Sonuç</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<h3 id="Anonim_fonksiyonlu_olay_dinleyicisi">Anonim fonksiyonlu olay dinleyicisi</h3>
+
+<p>Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu
+function modifyText(new_text) {
+  const t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Tabloya olay dinleyicisi ekleme fonksiyonu
+const el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+</pre>
+
+<p>Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the <code>modifyText()</code> function, which is responsible for actually responding to the event.</p>
+
+<h4 id="Sonuç_2">Sonuç</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p>
+
+<h3 id="Oklu_fonksiyon_ile_olay_dinleyicisi">Oklu fonksiyon ile olay dinleyicisi</h3>
+
+<p>This example demonstrates a simple event listener implemented using arrow function notation.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+  &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu
+function modifyText(new_text) {
+  const t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Oklu fonksiyon ile tabloya olay dinleyicisi ekleme
+const el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);
+</pre>
+
+<h4 id="Sonuç_3">Sonuç</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Please note that while anonymous and arrow functions are similar, they have different <code>this</code> bindings. While anonymous (and all traditional JavaScript functions) create their own <code>this</code> bindings, arrow functions inherit the <code>this</code> binding of the containing function.</p>
+
+<p>That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.</p>
+
+<h3 id="Options_kullanma_örnekleri">Options kullanma örnekleri</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  outer, once &amp; none-once
+  &lt;div class="middle" target="_blank"&gt;
+    middle, capture &amp; none-capture
+    &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
+      inner1, passive &amp; preventDefault(which is not allowed)
+    &lt;/a&gt;
+    &lt;a class="inner2" href="https://developer.mozilla.org/" target="_blank"&gt;
+      inner2, none-passive &amp; preventDefault(not open new page)
+    &lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.outer, .middle, .inner1, .inner2 {
+  display: block;
+  width:   520px;
+  padding: 15px;
+  margin:  15px;
+  text-decoration: none;
+}
+.outer {
+  border: 1px solid red;
+  color:  red;
+}
+.middle {
+  border: 1px solid green;
+  color:  green;
+  width:  460px;
+}
+.inner1, .inner2 {
+  border: 1px solid purple;
+  color:  purple;
+  width:  400px;
+}
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js notranslate">const outer  = document.querySelector('.outer');
+const middle = document.querySelector('.middle');
+const inner1 = document.querySelector('.inner1');
+const inner2 = document.querySelector('.inner2');
+
+const capture = {
+  capture : true
+};
+const noneCapture = {
+  capture : false
+};
+const once = {
+  once : true
+};
+const noneOnce = {
+  once : false
+};
+const passive = {
+  passive : true
+};
+const nonePassive = {
+  passive : false
+};
+
+outer.addEventListener('click', onceHandler, once);
+outer.addEventListener('click', noneOnceHandler, noneOnce);
+middle.addEventListener('click', captureHandler, capture);
+middle.addEventListener('click', noneCaptureHandler, noneCapture);
+inner1.addEventListener('click', passiveHandler, passive);
+inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+function onceHandler(event) {
+  alert('outer, once');
+}
+function noneOnceHandler(event) {
+  alert('outer, none-once, default');
+}
+function captureHandler(event) {
+  //event.stopImmediatePropagation();
+  alert('middle, capture');
+}
+function noneCaptureHandler(event) {
+  alert('middle, none-capture, default');
+}
+function passiveHandler(event) {
+  // Unable to preventDefault inside passive event listener invocation.
+  event.preventDefault();
+  alert('inner1, passive, open new page');
+}
+function nonePassiveHandler(event) {
+  event.preventDefault();
+  //event.stopPropagation();
+  alert('inner2, none-passive, default, not open new page');
+}
+</pre>
+
+<h4 id="Sonuç_4">Sonuç</h4>
+
+<p>Click the outer, middle, inner containers respectively to see how the options work.</p>
+
+<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Before using a particular value in the <code><var>options</var></code> object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. See {{anch("Safely detecting option support")}} for details.</p>
+
+<h2 id="Diğer_notlar">Diğer notlar</h2>
+
+<h3 id="Neden_addEventListener_kullanalım">Neden <code>addEventListener()</code> kullanalım?</h3>
+
+<p><code>addEventListener()</code> is the way to register an event listener as specified in W3C DOM. The benefits are as follows:</p>
+
+<ul>
+ <li>It allows adding more than a single handler for an event. This is particularly useful for {{Glossary("AJAX")}} libraries, JavaScript modules, or any other kind of code that needs to work well with other libraries/extensions.</li>
+ <li>It gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling).</li>
+ <li>It works on any DOM element, not just HTML elements.</li>
+</ul>
+
+<p>The alternative, <a href="#Older_way_to_register_event_listeners">older way to register event listeners</a>, is described below.</p>
+
+<h3 id="Olay_servisi_anında_dinleyici_eklemek">Olay servisi anında dinleyici eklemek</h3>
+
+<p>Eğer bir {{domxref("EventListener")}} {{domxref("EventTarget")}}'a olayı işlerken eklenirse, o dinleyici o olaydan dolay tetiklenmez. Ancak, yeni eklenen bu dinleyici, olayın servisinin ileriki bir sürecinde tetiklenebilir, mesela 'bubbling phase' (olay dinleyicisinin alt elemanlardan üst elemanlara doğru ilerlediği durum).</p>
+
+<h3 id="Birden_fazla_aynı_olay_dinleyicisi">Birden fazla aynı olay dinleyicisi</h3>
+
+<p>If multiple identical <code>EventListener</code>s are registered on the same <code>EventTarget</code> with the same parameters, the duplicate instances are discarded. They do not cause the <code>EventListener</code> to be called twice, and they do not need to be removed manually with the {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}} method.</p>
+
+<p>Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.</p>
+
+<p>However, repeatedly defining the same named function in such cases can be more problematic. (See <a href="#Memory_issues">Memory issues</a>, below.)</p>
+
+<h3 id="Olay_giderici_içinde_this_in_değeri">Olay giderici içinde <code>this</code> 'in değeri</h3>
+
+<p>It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.</p>
+
+<p>If attaching a handler function to an element using <code>addEventListener()</code>, the value of {{jsxref("Operators/this","this")}}&gt; inside the handler is a reference to the element. It is the same as the value of the <code>currentTarget</code> property of the event argument that is passed to the handler.</p>
+
+<pre class="brush: js notranslate">my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // logs the className of my_element
+  console.log(e.currentTarget === this) // logs `true`
+})
+</pre>
+
+<p>As a reminder, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">arrow functions do not have their own <code>this</code> context</a>.</p>
+
+<pre class="brush: js notranslate">my_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})</pre>
+
+<p>If an event handler (for example, {{domxref("Element.onclick", "onclick")}}) is specified on an element in the HTML source, the JavaScript code in the attribute value is effectively wrapped in a handler function that binds the value of <code>this</code> in a manner consistent with the <code>addEventListener()</code>; an occurrence of <code>this</code> within the code represents a reference to the element.</p>
+
+<pre class="brush: html notranslate">&lt;table id="my_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` refers to the table; logs 'my_table' --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>Note that the value of <code>this</code> inside a function, <em>called by</em> the code in the attribute value, behaves as per <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">standard rules</a>. This is shown in the following example:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  function logID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="my_table" onclick="logID();"&gt;&lt;!-- when called, `this` will refer to the global object --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>The value of <code>this</code> within <code>logID()</code> is a reference to the global object {{domxref("Window")}} (or <code>undefined</code> in the case of {{jsxref("Reference/Strict_mode", "strict mode")}}.</p>
+
+<h4 id="this_i_bind_kullanarak_belirtmek"> <code>this</code> 'i <code>bind()</code> kullanarak belirtmek</h4>
+
+<p>The {{jsxref("Function.prototype.bind()")}}&gt; method lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what <code>this</code> will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can remove it later.</p>
+
+<p>This is an example with and without <code>bind()</code>:</p>
+
+<pre class="brush: js notranslate">const Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+const s = new Something(document.body);
+</pre>
+
+<p>Another solution is using a special function called <code>handleEvent()</code> to catch any events:</p>
+
+<pre class="brush: js notranslate">const Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+const s = new Something(document.body);
+</pre>
+
+<p>Another way of handling the reference to <em>this</em> is to pass to the <code>EventListener</code> a function that calls the method of the object that contains the fields that need to be accessed:</p>
+
+<pre class="brush: js notranslate">class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    const that = this;
+    window.addEventListener('keydown', function(e) { that.someMethod(e); });
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+const myObject = new SomeClass();
+myObject.register();</pre>
+
+<h3 id="Olay_dinleyicisinde_data_giriş_çıkışı">Olay dinleyicisinde data giriş çıkışı</h3>
+
+<p>It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them again? There are a number of good methods for doing this.</p>
+
+<h4 id="Datayı_this_kullanarak_dinleyiciye_iletmek">Datayı <code>this</code> kullanarak dinleyiciye iletmek</h4>
+
+<p>As mentioned <a href="#Specifying_this_using_bind()">above</a>, you can use <code>Function.prototype.bind()</code> to pass a value to an event listener via the <code>this</code> reference variable.</p>
+
+<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id');
+const someString = 'Data';
+
+myButton.addEventListener('click', function () {
+  console.log(this);  // Expected Value: 'Data'
+}.bind(someString));
+</pre>
+
+<p>This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.</p>
+
+<h4 id="Getting_Data_Into_an_Event_Listener_Using_the_Outer_Scope_Property">Getting Data Into an Event Listener Using the Outer Scope Property</h4>
+
+<p>When an outer scope contains a variable declaration (with <code>const</code>, <code>let</code>), all the inner functions declared in that scope have access to that variable (look <a href="https://developer.mozilla.org/en-US/docs/Glossary/Function#Different_types_of_functions">here</a> for information on outer/inner functions, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">here</a> for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.</p>
+
+<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id');
+const someString = 'Data';
+
+myButton.addEventListener('click', function() {
+  console.log(someString);  // Expected Value: 'Data'
+
+  someString = 'Data Again';
+});
+
+console.log(someString);  // Expected Value: 'Data' (will never output 'Data Again')
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Although inner scopes have access to <code>const</code>, <code>let</code> variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing.</p>
+</div>
+
+<h4 id="Getting_Data_Into_and_Out_of_an_Event_Listener_Using_Objects">Getting Data Into and Out of an Event Listener Using Objects</h4>
+
+<p>Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)</p>
+</div>
+
+<p>Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.</p>
+
+<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id');
+const someObject = {aProperty: 'Data'};
+
+myButton.addEventListener('click', function() {
+  console.log(someObject.aProperty);  // Expected Value: 'Data'
+
+  someObject.aProperty = 'Data Again';  // Change the value
+});
+
+window.setInterval(function() {
+  if (someObject.aProperty === 'Data Again') {
+    console.log('Data Again: True');
+    someObject.aProperty = 'Data';  // Reset value to wait for next event execution
+  }
+}, 5000);
+</pre>
+
+<p>In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of <code>someObject.aProperty</code> would have changed, because <code>someObject</code> persists in memory (by <em>reference</em>) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., <code>let a = b = {aProperty: 'Yeah'};</code>), changing the data in either variable will affect the other.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.</p>
+</div>
+
+<h3 id="Internet_Explorerdan_miras_kalan_attachEvent">Internet Explorer'dan miras kalan attachEvent</h3>
+
+<p>In Internet Explorer versions before IE 9, you have to use {{domxref("EventTarget.attachEvent", "attachEvent()")}}, rather than the standard <code>addEventListener()</code>. For IE, we modify the preceding example to:</p>
+
+<pre class="brush: js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>There is a drawback to <code>attachEvent()</code>: The value of <code>this</code> will be a reference to the <code>window</code> object, instead of the element on which it was fired.</p>
+
+<p>The <code>attachEvent()</code> method could be paired with the <code>onresize</code> event to detect when certain elements in a web page were resized. The proprietary <code>mselementresize</code> event, when paired with the <code>addEventListener </code>method of registering event handlers, provides similar functionality as <code>onresize</code>, firing when certain HTML elements are resized.</p>
+
+<h3 id="Uyumluluk">Uyumluluk</h3>
+
+<p>You can work around <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, and {{domxref("Event.stopPropagation()")}} not being supported by Internet Explorer 8 by using the following code at the beginning of your script. The code supports the use of <code>handleEvent()</code> and also the {{event("DOMContentLoaded")}} event.</p>
+
+<div class="note">
+<p><strong>Note: </strong><code>useCapture</code> is not supported, as IE 8 does not have any alternative method. The following code only adds IE 8 support. This IE 8 polyfill only works in standards mode: a doctype declaration is required.</p>
+</div>
+
+<pre class="brush: js notranslate">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Eski_bir_olay_dinleyicisini_ekleme_yolu">Eski bir olay dinleyicisini ekleme yolu </h3>
+
+<p><code>addEventListener()</code> was introduced with the DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p>
+
+<pre class="brush: js notranslate">// Passing a function reference — do not add '()' after it, which would call the function!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+</pre>
+
+<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Other events and associated event handlers such as <code>blur</code> (<code>onblur</code>) and <code>keypress</code> (<code>onkeypress</code>) behave similarly.</p>
+
+<p>Because it was essentially part of {{glossary("DOM", "DOM 0")}}, this technique for adding event listeners is very widely supported and requires no special cross-browser code. It is used to register event listeners dynamically when very old browsers (like IE &lt;=8) must be supported; see the table below for details on browser support for <code>addEventListener</code>.</p>
+
+<h3 id="Hafıza_sorunları">Hafıza sorunları</h3>
+
+<pre class="brush: js notranslate">const els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(let i=0 ; i &lt; els.length; i++){
+  els[i].addEventListener("click", function(e){/*do something*/}, false);
+}
+
+
+// Case 2
+function processEvent(e){
+  /* do something */
+}
+
+for(let i=0 ; i &lt; els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+</pre>
+
+<p>In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) In the second case, it's possible to do <code><var>myElement</var>.removeEventListener("click", processEvent, false)</code> because <code>processEvent</code> is the function reference.</p>
+
+<p>Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a STATIC function reference. In both problem-cases below, a function reference is kept, but since it is redefined on each iteration, it is not static. In the third case, the reference to the anonymous function is being reassigned with each iteration. In the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. Therefore, though appearing to be simply [[Multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. However, since the function definition itself does not change, the SAME function may still be called for every duplicate listener (especially if the code gets optimized.)</p>
+
+<p>Also in both cases, because the function reference was kept but repeatedly redefined with each add, the remove-statement from above can still remove a listener, but now only the last one added.</p>
+
+<pre class="brush: js notranslate">// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element
+
+// Case 3
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* do lots of stuff with j */
+  els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false);
+}
+
+// Case 4
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* do lots of stuff with j */
+  function processEvent(e){/*do something*/};
+  els[j].addEventListener("click", processEvent, false);
+}</pre>
+
+<h3 id="Sayfa_kaydırma_performansını_pasif_dinleyiciler_ile_iyileştirmek">Sayfa kaydırma performansını pasif dinleyiciler ile iyileştirmek</h3>
+
+<p>According to the specification, the default value for the <code>passive</code> option is always <code>false</code>. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.</p>
+
+<p>To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the <code>passive</code> option to <code>true</code> for the {{event("touchstart")}} and {{event("touchmove")}} events on the document-level nodes {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("Document.body")}}. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.</p>
+
+<div class="note">
+<p><strong>Note:</strong> See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.</p>
+</div>
+
+<p>You can override this behavior by explicitly setting the value of <code>passive</code> to <code>false</code>, as shown here:</p>
+
+<pre class="brush: js notranslate">/* Feature detection */
+let passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null,
+    Object.defineProperty(
+      {},
+      "passive",
+      {
+        get: function() { passiveIfSupported = { passive: false }; }
+      }
+    )
+  );
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+</pre>
+
+<p>On older browsers that don't support the <code>options</code> parameter to <code>addEventListener()</code>, attempting to use it prevents the use of the <code>useCapture</code> argument without proper use of <a href="#Safely_detecting_option_support">feature detection</a>.</p>
+
+<p>You don't need to worry about the value of <code>passive</code> for the basic {{event("scroll")}} event. Since it can't be canceled, event listeners can't block page rendering anyway.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Ek_olarak">Ek olarak</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
+</ul>
diff --git a/files/tr/web/api/eventtarget/index.html b/files/tr/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..a5872453c9
--- /dev/null
+++ b/files/tr/web/api/eventtarget/index.html
@@ -0,0 +1,169 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/EventTarget
+---
+<p>{{ApiRef("DOM Events")}}</p>
+
+<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p>
+
+<p>{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.</p>
+
+<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatch an event to this <code>EventTarget</code>.</dd>
+</dl>
+
+<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li>
+</ul>
+
+<h2 id="Example">Example:</h2>
+
+<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3>
+
+<pre class="brush: js">var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if(!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if(!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for(var i = 0, l = stack.length; i &lt; l; i++) {
+    if(stack[i] === callback){
+      stack.splice(i, 1);
+      return this.removeEventListener(type, callback);
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if(!(event.type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[event.type];
+  event.target = this;
+  for(var i = 0, l = stack.length; i &lt; l; i++) {
+      stack[i].call(this, event);
+  }
+};
+</pre>
+
+{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>window.EventTarget</code> does not exist.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/tr/web/api/eventtarget/removeeventlistener/index.html b/files/tr/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..36617f7d0c
--- /dev/null
+++ b/files/tr/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,274 @@
+---
+title: EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>The <strong><code>EventTarget.removeEventListener()</code></strong> methodu daha önce  {{domxref("EventTarget.addEventListener()")}} ile kaydedilmiş olan {{domxref("EventListener")}}'i kaldırır.</p>
+
+<h2 id="Yazım">Yazım</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="Parametreler">Parametreler</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Kaldırılacak olan eventListener'in türünü belirten String.</dd>
+ <dt><code>listener</code></dt>
+ <dd>Kaldırılacak olan {{domxref("EventListener")}} fonksiyonu.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>{{domxref("EventListener")}} objesinin karakteristliğini belirten seçenek. Kullanılabilecek seçenekler:
+ <ul>
+  <li><code>capture</code>: {{jsxref("Boolean")}}.Bu, benzer türdeki olayların DOM ağacında altında kalan herhangi bir EventTarget'tan önce kayıtlı dinleyiciye iletileceği anlamına gelir. </li>
+  <li><code>passive</code>: {{jsxref("Boolean")}}. Dinleyicinin asla preventDefault( ) fonksiyonunu çağıramayacağını belirten {{jsxref("Boolean")}}. Dinleyici çağırsa bile "user-agent" bunu dikkate almayacaktır ve bu konuda bşr konsol uyarısında bulunacaktır.</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Sadece XBL ya da Firefox' chrome da çalışan kodta geçerlidir.Belirtilen olay dinleyicisinin sistem gurubuna atanıp atanmadığını gösteren {{jsxref("Boolean")}} dır.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Kaldırılacak olan {{domxref("EventListener")}}'in capturing EventListener olup olmadığını belirtir. Eğer bu alan kullanılmazsa varsayılan deferi "false" olarak kabul edilir.</dd>
+ <dd>Eğer bir olay dinleyici bir defa yakalayıcı bir defa yakalayıcı olmayacak şekilde iki defa kayıt edilmişse her birini ayrı ayrı kaldırın. Kaydedici olan olay dinleyicinin kaldırılması diğer olay dinleyici etkilemez.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <code>useCapture</code> çoğu eski tarayıcılarda gerekli bir alandır. Eğer geniş uyumluluğu hedefliyorsanız bu parametreyi sağlamanız önerilir.</div>
+
+<h3 id="Return_Value">Return Value</h3>
+
+<p>Void.</p>
+
+<h2 id="Notlar">Notlar</h2>
+
+<p>Eğer bir {{domxref("EventListener")}} , {{domxref("EventTarget")}}'tan bir olayı işlerken kaldırılmışsa en son yapılan aksiyonlardan bir daha çağrılamaz. Ama tekrar atanabilir.</p>
+
+<p><code>removeEventListener()</code> fonksiyonunun argümanlarla çağırılması <code>EventTarget</code> üzerinde herhangi bir {{domxref("EventListener")}}'in olup olmadığını kontrol etmede kullanılamaz.</p>
+
+<h2 id="Örnek">Örnek</h2>
+
+<p>Bu örnekte nasıl fareye basma tabanlı olay dinleyicisi eklemeyi ve üzerine fareyle üzerine gelme tabanlı olay dinleyicisinin kaldırmanın nasıl yapılacağını göstermektedir.</p>
+
+<pre class="brush: js">var body =
+        document.querySelector('body'),
+    clickTarget =
+        document.getElementById('click-target'),
+    mouseOverTarget =
+        document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+</pre>
+
+<h2 id="Özellikler">Özellikler</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1][2]</sup></td>
+   <td>{{CompatGeckoDesktop("1")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>7<sup>[4]</sup></td>
+   <td>1.0<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> made optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.60</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("1")}}<sup>[3]</sup></td>
+   <td>9.0</td>
+   <td>6.0<sup>[4]</sup></td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> made optional</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Although WebKit explicitly added "<code>[optional]</code>" to the <code>useCapture</code> parameter for Safari 5.1 and Chrome 13, it had been working before the change.</p>
+
+<p>[2] Before Chrome 49, the type and listener parameters were optional.</p>
+
+<p>[2] Prior to Firefox 6, the browser would throw an exception if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> would throw an exception if the listener parameter was <code>null</code>; now the method returns without error, but without doing anything.</p>
+
+<p>[4] Opera 11.60 made the <code>useCapture</code> parameter optional (<a href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</p>
+
+<p>[5] For backwards compatibility, browsers that support <code>options</code> allow the third parameter to be either <code>options</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>.</p>
+
+<h2 id="Eski_Tarayıcılara_Polyfill_Desteği">Eski Tarayıcılara Polyfill Desteği</h2>
+
+<p><code>addEventListener()</code> ve <code>removeEventListener()</code> eski tarayıcılarda bulunmaz. Onun yerine aşağıdaki kodu scriptlerinizin başına ekleyerek bu fonksiyonların kullanımını sağlayabilirsiniz. Ne yazık ki bu methot Internet Explorer 7 ya da öncesinde Element.prototype'ı extend etme desteğinin Explorer 8 gelene kadar sağlanmadığı için çalışmaz.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+</pre>
+
+<h2 id="Ayrıca_Bakın">Ayrıca Bakın</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>