1 files changed, 93 insertions, 0 deletions
diff --git a/files/ru/web/guide/events/creating_and_triggering_events/index.html b/files/ru/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..f766a93097
--- /dev/null
+++ b/files/ru/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,93 @@
+---
+title: Создание и вызов событий
+slug: Web/Guide/Events/Creating_and_triggering_events
+tags:
+  - DOM
+  - JavaScript
+  - events
+  - события
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+original_slug: Web/Guide/Events/Создание_и_вызов_событий
+---
+<p>Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют <strong>исскуственными</strong> событиями, по отношению к событиям, производимым браузером.</p>
+
+<h2 id="Создание_собственных_событий">Создание собственных событий</h2>
+
+<p>События могут быть созданы с помощью  конструктора <code><a href="/ru/docs/Web/API/Event">Event</a></code>:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Подписываемся на событие
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Вызываем событие
+elem.dispatchEvent(event);</pre>
+
+<p>Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже <a href="#The_old-fashioned_way">"Старомодный способ"</a>.</p>
+
+<h3 id="Добавление_пользовательских_данных_–_CustomEvent()">Добавление пользовательских данных – CustomEvent()</h3>
+
+<p>Чтобы добавить больше данных к объекту event, существует интерфейс <a href="/ru/docs/Web/API/CustomEvent">CustomEvent</a>, и вы можете использовать свойство <u><strong>detail</strong></u>, чтобы передать собственные данные. Например, событие может быть создано так:</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Это позволит вам получить доступ к дополнительным данным в обработчике:</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Старомодный_способ"><a id="The_old-fashioned_way" name="The_old-fashioned_way">Старомодный способ</a></h3>
+
+<p>Старый способ создать событие использует API в стиле Java. Пример:</p>
+
+<pre class="brush: js">// Создание события
+var event = document.createEvent('Event');
+
+// Назначить имя событию
+event.initEvent('build', true, true);
+
+// Слушаем событие
+document.addEventListener('build', function (e) {
+  // e.target соотетствует объекту document
+}, false);
+
+// target события может быть любой элемент
+document.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Вызов_встроенных_событий">Вызов встроенных событий</h2>
+
+<p>Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. <a class="external" href="/samples/domref/dispatchEvent.html">Просмотр действующих примеров.</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>