initial commit

7 files changed, 1116 insertions, 0 deletions

diff --git a/files/ru/web/api/eventtarget/addeventlistener/index.html b/files/ru/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..84d6390438
--- /dev/null
+++ b/files/ru/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,499 @@
+---
+title: Метод EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - DOM
+  - EventTarget
+  - addEventListener
+  - Обработчик
+  - Событие
+  - метод
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{apiref("DOM Events")}}</p>
+
+<p>Метод <code>EventTarget.addEventListener()</code> регистрирует определенный обработчик события, вызванного на {{domxref("EventTarget")}}.</p>
+
+<p>{{domxref("EventTarget")}} может быть {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}, или любым другим объектом, поддерживающим события (таким как <code style="font-style: normal;"><a href="/ru/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><code><em>target.addEventListener(type, listener</em>[<em>, options</em>]<em>);
+target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>,
+<em>wantsUntrusted </em>{{Non-standard_inline}}]); // только Gecko/Mozilla </code></pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Чувствительная к регистру строка, представляющая <a href="/en-US/docs/DOM/event.type" title="DOM/Event.type">тип прослушиваемого события</a>.</dd>
+ <dt><code>listener</code></dt>
+ <dd>Объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс {{domxref("EventListener")}} или просто <a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">функция JavaScript</a>.</dd>
+</dl>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Объект <code>options</code>, который определяет характеристики объекта, прослушивающего событие. Доступны следующие варианты:
+ <ul>
+  <li><code>capture</code>:  {{jsxref("Boolean")}} указывает, что события этого типа будут отправлены зарегистрированному слушателю <code>listener</code> перед отправкой на <code>EventTarget</code>, расположенный ниже в дереве DOM.</li>
+  <li><code>once</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть вызван не более одного раза после добавления. Если <code>true</code>, слушатель автоматически удаляется при вызове.</li>
+  <li><code>passive</code>:  {{jsxref("Boolean")}} указывает, что слушатель никогда не вызовет <code>preventDefault()</code>. Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Пример {{anch("Улучшение производительности прокрутки с помощью passive true")}}</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: {{jsxref("Boolean")}} указывает, что слушатель должен быть добавлен в системную группу. Доступно только в коде, запущенном в XBL или в <a href="https://chrome.google.com/webstore/detail/open-with-firefox/poeacjbaiakjnaepdjgggojcjoajakmd">расширении Chrome</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Если равно <code>true</code>, <code>useCapture</code> указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный <code>listener</code> перед отправкой в какой-либо <code>EventTarget</code> под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> для более детального объяснения. Значение <code>useCapture</code> по умолчанию равно <code>false</code>.
+ <div class="note"><strong>Note: </strong>Для прослушивателей событий прикреплённых к цели события, событие  находиться в целевой фазе, а не в фазах захвата или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра <code>useCapture</code>.</div>
+
+ <div class="note"><strong>Note:</strong> <code>useCapture</code> не всегда был опциональным. Лучше указывать данный параметр для повышения совместимости.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>Если равно <code>true</code>, слушатель будет получать сгенерированные события, посланные со страницы (по умолчанию равно <code>false</code> для chrome и <code>true</code> для обычных веб-страниц). Этот параметр доступен только в Gecko и в основном полезен для использования в дополнениях и самом браузере. Смотрите <a href="/ru/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Взаимодействие между привилегированными и непривилегированными страницами</a> для примеров использования.</dd>
+</dl>
+
+<p>Прежде чем использовать определенное значение в объекте <code>options</code>, рекомендуется убедиться, что браузер пользователя поддерживает его, поскольку это дополнение, которое не все браузеры поддерживали исторически.</p>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<h3 id="Обратный_вызов_прослушивателя_событий">Обратный вызов прослушивателя событий</h3>
+
+<p>Прослушиватель событий может быть задан либо как функция обратного вызова, либо как объект реализующий {{domxref("EventListener")}}, чей {{domxref("EventListener.handleEvent", "handleEvent()")}} метод служит как функция обратного вызова.</p>
+
+<p>Сама функция обранного вызова имеет те же параметры и возвращаемое значение что и метод <code>handleEvent()</code>; То есть обратный вызов принимает единственный параметр: объект основанный на {{domxref("Event")}} описывая событие, которое произошло и ничего не возвращая.</p>
+
+<p>Например, обратный вызов обработчика событий, который может использоваться для обработки {{event("fullscreenchange")}} и {{event("fullscreenerror")}} может выглядеть так:</p>
+
+<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">eventHandler</span><span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'fullscreenchange'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Переключатель полноэкранного режима */</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="comment token">/* fullscreenerror */</span> <span class="punctuation token">{</span>
+    <span class="comment token">/* Ошибка переключателя полноэкранного режима */</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Безопасная_проверка_поддержки_option">Безопасная проверка поддержки <code>option</code></h3>
+
+<p>В более старых версиях спецификации DOM третьим параметром <code>addEventListener</code> было логическое значение, указывающее, следует ли захватывать событие на этапе погружения. Со временем стало ясно, что необходимо больше вариантов. Вместо добавления дополнительных параметров в функцию (усложняя ситуацию при использовании необязательных значений) третий параметр был изменен на объект, который может содержать различные свойства, определяющие значения параметров для настройки слушателя событий.</p>
+
+<p>Поскольку старые браузеры (а также некоторые не слишком старые браузеры) по-прежнему предполагают, что третий параметр является логическим, возникает необходимость создания своего кода, чтобы разумно обрабатывать этот сценарий. Вы можете сделать это, используя функцию обнаружения для каждого из интересующих вас параметров.</p>
+
+<p>Например, если вы хотите проверить параметр <code>passive</code>:</p>
+
+<pre class="brush: js notranslate">var passiveSupported = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupported = true;
+    }
+  });
+
+  window.addEventListener("test", null, options);
+} catch(err) {}</pre>
+
+<p>Этот код создает объект <code>options</code> с геттером для свойства passive, устанавливающим флаг <code>passiveSupported</code> в <code>true</code>, если он вызван. Это означает, что если браузер проверяет значение свойства <code>passive</code> на объекте <code>options</code>, значение <code>passiveSupported</code> будет установлено в true; в противном случае он останется ложным. Затем мы вызываем <code>addEventListener</code>, чтобы настроить фальшивый обработчик событий, указав эти параметры для проверки опций, если браузер распознает объект в качестве третьего параметра.</p>
+
+<p>Для проверки поддержки использования какой-либо опции можно просто добавить геттер для нее, используя код, подобный тому, что показан выше.</p>
+
+<p>Если вы хотите добавить прослушиватель событий, использующий параметры, о которых идет речь, вы можете сделать это подобным образом:</p>
+
+<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>Здесь мы добавляем слушателя для события {{event ("mouseup")}} элемента <code>someElement</code>. Для третьего параметра, если <code>passiveSupported</code> имеет значение <code>true</code>, мы указываем объект <code>options</code> с <code>passive: true</code>; в противном случае мы знаем, что нам нужно передать логическое значение, и мы передаем <code>false</code> как значение параметра <code>useCapture</code>.</p>
+
+<p>Вы можете использовать стороннюю библиотеку, такую как <a href="https://modernizr.com/docs">Modernizr</a> или <a href="https://github.com/rafrex/detect-it">Detect It</a>, чтобы проверить поддержку необходимого свойства.</p>
+
+<p>Узнайте больше о <a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a> из  <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p>
+
+<h2 id="Примеры"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>Примеры</span></h2>
+
+<h3 id="addEventListenerBasic" name="addEventListenerBasic">Добавление простого слушателя</h3>
+
+<p>Эти примеры демонстрируют как использовать <code>addEventListener()</code> для наблюдения за щелчками мышкой по элементу.</p>
+
+<h4 id="HTML_Содержимое">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript_Содержимое">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция изменяет содержимое t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "три") {
+    t2.firstChild.nodeValue = "два";
+  } else {
+    t2.firstChild.nodeValue = "три";
+  }
+}
+
+// Добавляет слушателя событий для таблицы
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>В примере выше, <code>modifyText()</code> регистрирует слушателя для события click, используя <code>addEventListener()</code>. Клик в любом месте таблицы будет поднимать обработчик и запускать <code>modifyText()</code>.</p>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<p>Если вам нужно передать параметры в слушателя, вы можете использовать анонимные функции.</p>
+
+<h3 id="Event_Listener_with_anonymous_function" name="Event_Listener_with_anonymous_function">Слушатель события с анонимной функцией</h3>
+
+<h4 id="HTML_Содержимое_2">HTML Содержимое</h4>
+
+<pre class="brush: html notranslate">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;один&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;два&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_Содержимое_2">JavaScript Содержимое</h4>
+
+<pre class="brush: js notranslate">// Функция, изменяющая содержание t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Функция, добавляющая слушатель к таблице
+el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("четыре")}, 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="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_Listener_with_anonymous_function')}}</p>
+
+<h3 id="Слушатель_события_со_стрелочной_функцией">Слушатель события со стрелочной функцией</h3>
+
+<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">// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Add event listener to table with an arrow function
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Обратите внимание: несмотря на то, что анонимные и стрелочные функции схожи, они имеют разные значения <code>this</code>.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<h3 id="Why_use_addEventListener.3F" name="Why_use_addEventListener.3F">Зачем использовать <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener</code> — это способ зарегистрировать обработчик события, описанный в документации W3C DOM. Вот список преимуществ его использования:</p>
+
+<ul>
+ <li>Позволяет добавлять множество обработчиков для одного события. Это особенно полезно для <a href="/en-US/docs/DHTML" title="DHTML">DHTML</a> библиотек или <a href="/en-US/docs/Extensions" title="Extensions">Mozilla extensions</a>, которые должны работать в условиях использования сторонних библиотек/расширений.</li>
+ <li>Предоставляет точный контроль фазы срабатывания(вызова) обработчика (захват или всплытие)</li>
+ <li>Срабатывает на любом DOM элементе, а не только на HTML элементах.</li>
+</ul>
+
+<p>Ниже описан другой, <a href="#Older_way_to_register_event_listeners">более старый способ регистрации обработчиков</a>.</p>
+
+<h3 id="Adding_a_listener_during_event_dispatch" name="Adding_a_listener_during_event_dispatch">Добавление слушателя во время обработки события</h3>
+
+<p>Если <code>EventListener</code> добавлен к <code>EventTarget</code> во время обработки события, он не будет вызван текущими действиями, но может быть вызван на более поздней стадии обработки события, при восходящей обработке.</p>
+
+<h3 id="Multiple_identical_event_listeners" name="Multiple_identical_event_listeners">Несколько одинаковых слушателей события</h3>
+
+<p>Если зарегистрировано несколько одинаковых <code>EventListener</code> на одном <code>EventTarget</code> с одинаковыми параметрами, дублирующиеся слушатели игнорируются. Так как одинаковые слушатели игнорируются, не требуется удалять их вручную с помощью метода <a href="/en-US/docs/DOM/EventTarget.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
+
+<h3 id="The_value_of_this_within_the_handler" name="The_value_of_this_within_the_handler">Значение <code>this</code> в обработчике</h3>
+
+<p>Обычно желательно передавать элемент, на котором сработал обработчик события, например, при использовании обобщённых обработчиков для схожих элементов. При добавлении функции при помощи <code>addEventListener()</code> значение переменной <code>this</code> меняется — заметьте, что значение <code>this</code> передаётся в функцию от вызывающего объекта.</p>
+
+<p>В примере выше значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика равно таблице 't'. Это противоположно поведению, которое возникает, если обработчик добавлен в HTML-разметке:</p>
+
+<pre class="brush: html notranslate">&lt;table id="t" onclick="modifyText();"&gt;
+  . . .
+</pre>
+
+<p>Значение переменной <code>this</code> внутри <code>modifyText()</code> при вызове событием клика будет равно ссылке на глобальный (window) объект (или <code>undefined</code> при использовании <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)</p>
+
+<div class="note"><strong>Note:</strong> В JavaScript 1.8.5 введён метод <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешню ссылку на слушатель, чтобы Вы могли удалить его позже.</div>
+
+<p>Пример с использованием <code>bind</code> и без него:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, так как this является элементом
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', так как в this передано значение объекта Something
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+</pre>
+
+<p>Проблема в примере выше заключается в том, что Вы не можете удалить слушатель, вызванный с <code>bind</code>. Другое решение использует специальную функцию <code>handleEvent</code>, чтобы перехватывать любые события:</p>
+
+<pre class="brush: js notranslate">var Something = function(element) {
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', так как this является объектом Something
+    switch(event.type) {
+      case 'click':
+        // код обработчика...
+        break;
+      case 'dblclick':
+        // код обработчика...
+        break;
+    }
+  };
+
+  // В этом случае слушатели хранятся в this, а не в this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Вы можете напрямую удалять слушатели
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+</pre>
+
+<h3 id="Legacy_Internet_Explorer_and_attachEvent" name="Legacy_Internet_Explorer_and_attachEvent">Наследство Internet Explorer и attachEvent</h3>
+
+<p>В Internet Explorer младше 9 версии, вы можете использовать <code><a href="http://msdn.microsoft.com/en-us/library/ms536343(VS.85).aspx">attachEvent</a></code> вместо стандартного <code>addEventListener</code>. Для поддержки IE, пример выше может быть модифицирован следующим образом:</p>
+
+<pre class="brush: js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>У <code>attachEvent</code> есть недостаток: <code>this</code> будет ссылаться на объект <code>window</code>, а не на элемент, на котором он был вызван.</p>
+
+<h3 id="Compatibility" name="Compatibility">Совместимость</h3>
+
+<p>Вы можете обойти методы <code>addEventListener</code>, <code>removeEventListener</code>, <code>Event.preventDefault</code> и <code>Event.stopPropagation</code> не поддерживаемы в IE 8 используя следующий код в начале Вашего скрипта. Этот код подерживает использование <code>handleEvent</code> и события <code>DOMContentLoaded</code>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.</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 (listener.handleEvent) {
+          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="Older_way_to_register_event_listeners" name="Older_way_to_register_event_listeners">Старый способ регистрации обработчиков событий</h3>
+
+<p><code>addEventListener()</code> был добавлен в спецификации DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. До этого слушатели добавлялись следующим образом:</p>
+
+<pre class="brush: js notranslate">// Передача ссылки на функцию — не добавляйте '()' после него, это вызовет функцию!
+el.onclick = modifyText;
+
+// Использование функционального выражения
+element.onclick = function() {
+  // ... логика функции ...
+};
+</pre>
+
+<p>Этот метод заменяет текущие слушатели события <code>click</code>, если они есть. Тоже самое для других событий и ассоциируемых с ними  обработчиков, таких как <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), и так далее.</p>
+
+<p>Так как это по существу было частью DOM 0, этот метод имеет широкую поддержку и не требует специального кросс-браузерного кода; следовательно, это обычно используется, чтобы добавлять слушатели динамически, если не требуются расширенные возможности <code>addEventListener()</code>.</p>
+
+<h3 id="Memory_issues" name="Memory_issues">Вопросы памяти</h3>
+
+<pre class="brush: js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Случай 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*некоторые действия*/}, false);
+}
+
+// Случай 2
+function processEvent(e){
+  /*некоторые действия*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+</pre>
+
+<p>В первом случае новая (анонимная) функция создаётся при каждом шаге цикла. Во втором случае одна заранее объявленная функция используется как обработчик события. Из этого следует меньшее потребление памяти. Более того, в первом случае, вследствие отсутствия ссылок на анонимные функции, невозможно вызвать <code><a href="/en-US/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a>,</code> потому что нет ссылки на обработчик, в то время, как во втором случае возможно вызвать <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
+
+<h3 id="Улучшение_производительности_прокрутки_с_помощью_passive_true">Улучшение производительности прокрутки с помощью <code>passive: true</code></h3>
+
+<p>Значение по умолчанию для параметра <code>passive</code> - <code>false</code>. Начиная с Chrome 56 (desktop, Chrome for Android, Android webview) значение по умолчанию для {{event("touchstart")}} и {{event("touchmove")}} равно <code>true</code>, а вызовы <code>preventDefault()</code> не разрешены. Чтобы отменить это поведение, необходимо установить параметр <code>passive</code> в <code>false</code> (см. пример ниже). Это изменение не позволяет слушателю блокировать показ страницы во время прокрутки пользователя. Демонстрация доступна на <a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">сайте разработчиков Google</a>. Обратите внимание, что Edge вообще не поддерживает <code>options</code>, и добавление его без <a href="https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">проверки поддержки</a> помешает использовать аргумент <code>useCapture</code>.</p>
+
+<pre class="brush: js notranslate">/* Feature detection */
+var passiveSupported = false;
+try {
+    window.addEventListener(
+        "test",
+        null,
+        Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
+} catch(err) {}
+
+/* Event Listener */
+var elem = document.getElementById('elem');
+elem.addEventListener(
+    '<code>touchmove</code>',
+    function listener() {   /* do something */ },
+    passiveSupported ? { passive: true } : false
+);</pre>
+
+<p>Установка <code>passive</code> не имеет значения для основного события {{event ("scroll")}}, поскольку его нельзя отменить, поэтому его слушатель в любом случае не может блокировать показ страницы.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость</h2>
+
+<div>{{Compat("api.EventTarget.addEventListener", 3)}}</div>
+
+<h3 id="Заметки_по_Gecko">Заметки по Gecko</h3>
+
+<ul>
+ <li>До Firefox 6, браузер выбросит исключение, если параметр <code>useCapture</code> не был точно равен <code>false</code>. До Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> выбросит исключение, если параметр <code>listener</code> был равен <code>null</code>; сейчас метод завершается без ошибки, но ничего не делает.</li>
+</ul>
+
+<h3 id="Заметки_по_WebKit">Заметки по WebKit</h3>
+
+<ul>
+ <li>Несмотря на то, что в WebKit параметр <code>useCapture</code> был объявлен необязательным <a href="http://trac.webkit.org/changeset/89781">только в июне 2011 года</a>, это работало и до этого изменения. Новые изменения были добавлены в Safari 5.1 и Chrome 13.</li>
+</ul>
+
+<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="Browser_compatibility_2">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/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/ru/web/api/eventtarget/attachevent/index.html b/files/ru/web/api/eventtarget/attachevent/index.html
new file mode 100644
index 0000000000..e7d6f423a4
--- /dev/null
+++ b/files/ru/web/api/eventtarget/attachevent/index.html
@@ -0,0 +1,93 @@
+---
+title: EventTarget.attachEvent()
+slug: Web/API/EventTarget/attachEvent
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Проприетарная альтернатива методу {{domxref("EventTarget.addEventListener()")}} от Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>attached</em> = <em>target</em>.attachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM элемент, на который требуется повесить "attachEvent()"</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для установки обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, вызываемая при появлении ивента на целевом элементе. Функция будет вызвана без аргументов, и с "this", ссылающимся на <a href="/en-US/docs/Web/API/Window/window"><code>window</code> object.</a></dd>
+ <dt>attached</dt>
+ <dd>Возвращает "true"если установка была успешна, иначе "false".</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="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>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>attachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.addEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.detachEvent()")}}</li>
+ <li>{{domxref("EventTarget.fireEvent()")}}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/detachevent/index.html b/files/ru/web/api/eventtarget/detachevent/index.html
new file mode 100644
index 0000000000..bf326b32ba
--- /dev/null
+++ b/files/ru/web/api/eventtarget/detachevent/index.html
@@ -0,0 +1,91 @@
+---
+title: EventTarget.detachEvent()
+slug: Web/API/EventTarget/detachEvent
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Кратко">Кратко</h2>
+
+<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}}  в Microsoft Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>)
+</pre>
+
+<dl>
+ <dt>target</dt>
+ <dd>DOM елемент, для которого надо убрать обработчик.</dd>
+ <dt>eventNameWithOn</dt>
+ <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd>
+ <dt>callback</dt>
+ <dd>Функция, которую стоит убрать.</dd>
+</dl>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Не является частью спецификации.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="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>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6 thru 10 [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p>
+
+<h2 id="Смотрите_так-же">Смотрите так-же</h2>
+
+<ul>
+ <li>{{ domxref("EventTarget.attachEvent()") }}</li>
+ <li>{{ domxref("EventTarget.fireEvent()") }}</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/dispatchevent/index.html b/files/ru/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..26e049cb28
--- /dev/null
+++ b/files/ru/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,82 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p>Отправляет событие в общую систему событий. Это событие подчиняется тем же правилам поведения "Захвата" и "Всплывания" как и непосредственно инициированные события.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<ul>
+ <li><code>event</code> - объект {{domxref("Event")}}, который инициализируется.</li>
+ <li><code>target</code> - используется для инициализации {{domxref("Event", "", "target")}}  и определяет, какие обработчики события вызвать.</li>
+</ul>
+
+<h3 id="Возвращаемое_Значение">Возвращаемое Значение</h3>
+
+<ul>
+ <li>Возвращаемое значение — <code>false</code>, если событие отменяемое и хотя бы один из обработчиков этого события вызвал {{domxref("Event.preventDefault()")}}. В ином случае — <code>true</code>.</li>
+</ul>
+
+<p>Метод <code>dispatchEvent</code> генерирует исключение <code>UNSPECIFIED_EVENT_TYPE_ERR</code>, если тип события не был указан при инициализации до вызова метода, или если тип события равен <code>null</code><strong> </strong>или пустой строке. Исключения возникающие в обработчиках события работают как неперехваченные исключения; обработчики события отрабатывают во вложенном стеке вызовов: они блокируют вызывающий код до окончания своего выполнения, но исключения не распространяются на вызывающего.</p>
+
+<h2 id="Заметки">Заметки</h2>
+
+<p>dispatchEvent является последним шагом для процесса создание =&gt; инициализация =&gt; диспетчер, который используется для контроля  событий внутри модели выполнения событий.Событие может быть создано используя метод  <a href="https://developer.mozilla.org/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> и инициализировано используя <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> или другой, более конкретный, метод инициализации, такой как <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> или <a href="https://developer.mozilla.org/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">События</a></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>Для прочтения примера смотрите <a href="https://developer.mozilla.org/ru/docs/Web/Guide/Events/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B2%D1%8B%D0%B7%D0%BE%D0%B2_%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D0%B9" title="https://developer.mozilla.org/en-US/docs/DOM/Creating_and_triggering_events?redirectlocale=en-US&amp;redirectslug=Creating_and_triggering_custom_events">Создание и инициирование собственных событий</a> .</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Описание</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventTarget-dispatchEvent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">Примечание</h2>
+
+<p><code>dispatchEvent</code> представляет собой последний шаг в процессе create-init-dispatch, который служит для отправки событий.</p>
+
+<p>Событие может быть создано методом <a href="/en/DOM/document.createEvent" title="en/DOM/document.createEvent">document.createEvent</a> и инициализировано <a href="/en/DOM/event.initEvent" title="en/DOM/event.initEvent">initEvent</a> или, более конкретными инициализирующими методами, такими как <a href="/en/DOM/event.initMouseEvent" title="en/DOM/event.initMouseEvent">initMouseEvent</a> или <a href="/en/DOM/event.initUIEvent" title="en/DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Смотрите также <a href="/en/DOM/event" title="en/DOM/event">справку по Event object</a>.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p id="Specification">{{Compat("api.EventTarget.dispatchEvent")}}</p>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
+
+<div style="-webkit-border-radius: 8px; opacity: 0; display: none; padding: 10px; background-color: #ffffff; position: fixed; right: 0px; top: 0px;"></div>
diff --git a/files/ru/web/api/eventtarget/eventtarget/index.html b/files/ru/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..e7f8ed381d
--- /dev/null
+++ b/files/ru/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,76 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p> <code><strong>EventTarget()</strong></code> конструктор создаёт  новый {{domxref("EventTarget")}} экземпляр объекта.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<p>Нет параметров.</p>
+
+<h3 id="Возвращаемые_значения">Возвращаемые значения</h3>
+
+<p>Экземпляр {{domxref("EventTarget")}} объекта.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<p>Срецификация</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Срецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<div>
+<div class="hidden">Таблица совместимости на этой странице сгенерированна из структурированных данных. Если Вы желаете внести изменения, пожалуйста проверьте адрес <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aи отправьте запрос (pull request).</div>
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+</div>
+
+<h2 id="Смотрите_так_же">Смотрите так же</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/web/api/eventtarget/index.html b/files/ru/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..14aab04ab3
--- /dev/null
+++ b/files/ru/web/api/eventtarget/index.html
@@ -0,0 +1,120 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - DOM
+  - Interface
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<p><strong><code>EventTarget</code></strong> - это интерфейс, реализуемый объектами, которые могут генерировать события и могут иметь подписчиков на эти события.</p>
+
+<p>Наиболее частые генераторы событий - {{domxref("Element")}}, {{domxref("document")}}, и {{domxref("window")}},  но другие объекты так же могут использоваться в качестве источников событий , например {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, и другие.</p>
+
+<p>Многие источники событий (включая элементы, документ и окно) также поддерживают установку <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">обработчиков событий</a> с помощью on<code>...</code> свойств и аттрибутов.</p>
+
+<h2 id="Methods" name="Methods">Методы</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Регистрирует обработчик событий указанного типа на объекте.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Удаляет обработчик события.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Генерирует событие на объекте <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Без изменений.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Несколько параметров теперь являються необязательными (<code>listener</code>), или принимают нулевое значение (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="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>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</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>Базовая поддержка</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>
+
+<h3 id="Дополнительные_методы_для_Mozilla_chrome_кода">Дополнительные методы для Mozilla chrome кода</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. Смотрите так-же <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/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="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Event reference</a> - доступные ивенты на платформе.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/ru/web/api/eventtarget/removeeventlistener/index.html b/files/ru/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..3470bb95a8
--- /dev/null
+++ b/files/ru/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,155 @@
+---
+title: Метод EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - Браузерная совместимость
+  - Обработка событий
+  - метод
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Удаляет обработчик события, который был зарегистрирован при помощи {{domxref("EventTarget.addEventListener()")}}. Обработчик определяется типом события, самой функцией обработки события, и дополнительными параметрами, переданными при регистрации обработчика.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</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="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Строка, описывающая тип события, которое нужно удалить.</dd>
+ <dt><code>listener</code></dt>
+ <dd>{{ domxref("EventListener") }} функция, которую нужно удалить с элемента.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Объект опций, описывающий характеристики обработчика события. Доступные опции:
+ <ul>
+  <li><code>capture</code>: {{jsxref("Boolean")}}. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым <code>EventTarget</code>, находящимся ниже него в дереве DOM.</li>
+  <li><code>passive</code>: {{jsxref("Boolean")}}. Указывает на то, что <code>listener</code> никогда не будет вызывать <code>preventDefault()</code>. В противном случае (если <code>listener</code> вызовет <code>preventDefault()</code> ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Указывает, был ли удаляемый {{domxref("EventListener")}}зарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:<code>false</code>.</dd>
+ <dd>Если обработчик был зарегистрирован дважды, один раз с перехватом (с <code>capture</code>) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.</dd>
+</dl>
+
+<div class="note"><strong>Заметка:</strong> <code>useCapture</code> требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр <code>useCapture</code>.</div>
+
+<h3 id="Return_value" name="Return_value">Возвращаемое значение</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Поиск_обработчика_при_удалении">Поиск обработчика при удалении</h3>
+
+<p>В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра <code>useCapture</code> / <code>options.capture</code>, но так как это поведение не закреплено стандартом, наилучшим способом будет указание для <code>removeEventListener()</code> в точности тех же параметров, что были переданы в <code>addEventListener()</code>.</p>
+
+<h2 id="Compatibility" name="Compatibility">Примечания</h2>
+
+<p>Если {{domxref("EventListener")}} был удален из {{domxref("EventTarget")}} процессе обработки события (например предшествующим {{domxref("EventListener")}} того же типа), он не будет вызван. После удаления, {{domxref("EventListener")}} не будет вызываться, однако его можно назначить заново.</p>
+
+<p>Вызов <code>removeEventListener()</code> с параметрами, не соответствующими ни одному зарегистрированному {{domxref("EventListener")}} в <code>EventTarget</code>, не имеет никакого эффекта.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Это пример добавления и последующего удаления обработчика событий.</p>
+
+<pre class="brush: js">var div = document.getElementById('div');
+var listener = function (event) {
+  /* do something here */
+};
+div.addEventListener('click', listener, false);
+div.removeEventListener('click', listener, false);
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузеров</h2>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h3 id="Gecko_примечания">Gecko примечания</h3>
+
+<ul>
+ <li>В версиях Firefox младше версии 6 браузер бросает исключение, если параметр <code>useCapture</code> не был явно указан как <font face="'Courier New', 'Andale Mono', monospace"><span style="line-height: normal;">false</span></font>. В Gecko младше 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> бросает исключение, если параметр <code>listener</code> равен <code>null</code>; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.</li>
+</ul>
+
+<h3 id="Opera_примечания">Opera примечания</h3>
+
+<ul>
+ <li>В Opera 12.00 параметр <code>useCapture</code> - опциональный (<a class="external" href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</li>
+</ul>
+
+<h3 id="WebKit_примечания">WebKit примечания</h3>
+
+<ul>
+ <li>Несмотря на то, что WebKit явно добавил "<code>[optional]</code>" к параметру <code>useCapture</code> в Safari 5.1 и Chrome 13, это работало и до изменений.</li>
+</ul>
+
+<h3 id="Specification" name="Specification">Спецификация</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li>
+</ul>
+
+<h2 id="Полифилы_для_поддержки_старых_браузеров">Полифилы для поддержки старых браузеров</h2>
+
+<p><code>addEventListener()</code> и <code>removeEventListener()</code> отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать <code>addEventListener()</code> и <code>removeEventListener()</code> в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.</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="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>