1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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>
|
