-
Notifications
You must be signed in to change notification settings - Fork 38
Expand file tree
/
Copy pathEventTarget.html
More file actions
88 lines (77 loc) · 17.6 KB
/
Copy pathEventTarget.html
File metadata and controls
88 lines (77 loc) · 17.6 KB
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
<!DOCTYPE html><html><head><meta charset="utf-8"><title>EventTarget JavaScript API</title><meta name="description" content="Interactive API reference for the JavaScript EventTarget Object. EventTargets are Objects that fire events. EventTargets usually expose an onevent property for each event where you can assign a Funct"><link rel="stylesheet" type="text/css" href="styles.css"><script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23450559-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></head><body><script>if (sessionStorage.collapsed === 'true') {
document.body.classList.add('members-collapsed');
}
if (localStorage.theme) {
document.body.parentElement.classList.add(localStorage.theme);
}</script><div class="topnav"><a href="/">JavaScripture</a><div class="bookmarks"><a class="bookmark contribute" href="https://github.com/nkronlage/JavaScripture">Contribute via GitHub</a> <a class="bookmark" href="/feedback">Feedback</a></div></div><div class="container"><nav class="leftnav"><div id="searchContainer"><input id="searchBox" type="text" placeholder="Search (Ctrl + S)" autocomplete="false"><div id="resultsBox" style="display:none;"></div></div><div id="apichooser"><a href="#" onclick="openApiChooser(); return false;"><div class="arrow"></div><span id="selectedsets"></span></a><div id="obscure"></div><div id="apisets"><ul></ul></div></div><div class="toc"><h2>EventTarget</h2><div class="navgroup"><div class="group collapsed"><a href="#InstanceMethods" onclick="expandoClicked(this.parentNode); return false;"><div class="arrow"></div>Instance Methods</a><div class="subgroup"><a href="#addEventListener" title="addEventListener">addEventListener</a><a href="#dispatchEvent_Event">dispatchEvent</a><a href="#removeEventListener" title="removeEventListener">removeEventListener</a></div></div><a href="EventTarget#Details">Details</a></div><h2>DOM API</h2><div id="related-apis" class="navgroup"></div><h2>All API</h2><div id="rootObjs" class="navgroup"><span class="empty">No API set selected.</span></div></div></nav><div class="content"><h1 class="declaration"><span class="object">EventTarget</span> <span class="type">: <a href="/Object">Object</a></span></h1><div class="metadata"></div><div class="objectdescription">EventTargets are Objects that fire events. EventTargets usually expose an <code>on<em>event</em></code> property for each event where you can assign a <a href="/Function">Function</a> to be called when the event fires. You can also use <a href="#addEventListener"><code>addEventListener()</code></a> to hook up multiple listeners to the same event.<div class="membermetadata"><a href="https://dom.spec.whatwg.org/#interface-eventtarget" class="spec">Spec</a></div></div><div><a name="InstanceMethods"></a><h2>Instance Methods</h2><div class="methodgroup"><a name="addEventListener"></a> <span class="membername primary">addEventListener</span> 4 variants<div class="mode"><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="addEventListener_String_Function_Boolean"></a><div class="declaration"><span class="membername primary">addEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/Function">Function</a>, <span class="optional">[<span class="membername">useCapture</span> : <a class="membertype" href="/Boolean">Boolean</a>]</span>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">listener</span>(<span class="membername">event</span> : <a class="membertype" href="/Event">Event</a>) : <a class="membertype" href="/undefined">undefined</a></div></div><div class="member-body"><p class="description">Adds <code>listener</code> to the list of callbacks called when the specified event is fired. If <code>useCapture</code> is true, <code>listener</code> will be called in the capture phase of the event routing (ie, during the walk down the tree to the target instead of on the way up after firing on the target). Unlike using the <code>on<em>event</em></code> style of listening to events, <code>addEventListener</code> allows more than one listener to be associated with the event. Use <a href="#removeEventListener"><code>removeEventListener()</code></a> to stop listening to the event.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<!-- This example demonstrates adding 'click' listeners and capture/bubbling -->
<div id='div'>
<button id='button'>click</button>
</div>
<script>
var body = document.body;
body.addEventListener('click', function(event) {
console.log('body capture');
}, true);
var div = document.getElementById('div');
div.addEventListener('click', function(event) {
console.log('div capture');
}, true);
var button = document.getElementById('button');
button.addEventListener('click', function(event) {
console.log('button capture');
}, true);
button.addEventListener('click', function(event) {
console.log('button bubble');
}, false);
div.addEventListener('click', function(event) {
console.log('div bubble');
}, false);
body.addEventListener('click', function(event) {
console.log('body bubble');
}, false);
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "EventTarget.addEventListener"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="addEventListener_String_EventListener_Boolean"></a><div class="declaration"><span class="membername primary">addEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/EventListener">EventListener</a>, <span class="optional">[<span class="membername">useCapture</span> : <a class="membertype" href="/Boolean">Boolean</a>]</span>) : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description"></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="addEventListener_String_Function_Object"></a><div class="declaration"><span class="membername primary">addEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/Function">Function</a>, <span class="membername">options</span> : <a class="membertype" href="/Object">Object</a>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">listener</span>(<span class="membername">event</span> : <a class="membertype" href="/Event">Event</a>) : <a class="membertype" href="/undefined">undefined</a></div><div class="subfunction"><span class="membername">options</span> : {<table><tr><td><span class="membername">capture</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>call listener in the capture phase</td></tr><tr><td><span class="membername">once</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>remove <code>listener</code> after firing</td></tr><tr><td><span class="membername">passive</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>set to <code>true</code> if you'll never call <a href="/Event#preventDefault"><code>event.preventDefault()</code></a>. Allows browser to provide perf optimizations like smoother scrolling.</td></tr></table><span class="subfunctionclose">}</span></div></div><div class="member-body"><p class="description"></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="addEventListener_String_EventListener_Object"></a><div class="declaration"><span class="membername primary">addEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/EventListener">EventListener</a>, <span class="membername">options</span> : <a class="membertype" href="/Object">Object</a>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">options</span> : {<table><tr><td><span class="membername">capture</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>call listener in the capture phase</td></tr><tr><td><span class="membername">once</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>remove <code>listener</code> after firing</td></tr><tr><td><span class="membername">passive</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>set to <code>true</code> if you'll never call <a href="/Event#preventDefault"><code>event.preventDefault()</code></a>. Allows browser to provide perf optimizations like smoother scrolling.</td></tr></table><span class="subfunctionclose">}</span></div></div><div class="member-body"><p class="description"></p></div></div></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="dispatchEvent"></a> <a name="dispatchEvent_Event"></a><div class="declaration"><span class="membername primary">dispatchEvent</span>(<span class="membername">event</span> : <a class="membertype" href="/Event">Event</a>) : <a class="membertype" href="/Boolean">Boolean</a></div><div class="member-body"><p class="description">Raises <code>event</code> on <code>this</code>. If <a href="/Event#bubbles"><code>event.bubbles</code></a> is <code>true</code>, and <code>this</code> is an <a href="Node">Node</a>, the event will propagate through the ancestor hierarchy.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<div id='parent'>
Parent
<div id='child'>
--Child
</div>
</div>
<script>
var phaseNames = { };
phaseNames[Event.CAPTURING_PHASE] = 'capture';
phaseNames[Event.AT_TARGET] = 'atTarget';
phaseNames[Event.BUBBLING_PHASE] = 'bubble';
var listener = function(event) {
console.log(' phase=' + phaseNames[event.eventPhase] +
' type=' + event.type);
};
var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener('customEvent', listener, /* capture = */ true);
child.addEventListener('customEvent', listener);
parent.addEventListener('customEvent', listener);
console.log('dispatching bubbles=false event')
var nonBubblingEvent = new Event('customEvent');
child.dispatchEvent(nonBubblingEvent);
console.log('\ndispatching bubbles=true event')
var nonBubblingEvent = new Event('customEvent', { bubbles: true });
child.dispatchEvent(nonBubblingEvent);
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "EventTarget.dispatchEvent"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div><div class="methodgroup"><a name="removeEventListener"></a> <span class="membername primary">removeEventListener</span> 4 variants<div class="mode"><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="removeEventListener_String_Function_Boolean"></a><div class="declaration"><span class="membername primary">removeEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/Function">Function</a>, <span class="optional">[<span class="membername">useCapture</span> : <a class="membertype" href="/Boolean">Boolean</a>]</span>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">listener</span>(<span class="membername">event</span> : <a class="membertype" href="/Event">Event</a>) : <a class="membertype" href="/undefined">undefined</a></div></div><div class="member-body"><p class="description"></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="removeEventListener_String_EventListener_Boolean"></a><div class="declaration"><span class="membername primary">removeEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/EventListener">EventListener</a>, <span class="optional">[<span class="membername">useCapture</span> : <a class="membertype" href="/Boolean">Boolean</a>]</span>) : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description"></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="removeEventListener_String_Function_Object"></a><div class="declaration"><span class="membername primary">removeEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/Function">Function</a>, <span class="membername">options</span> : <a class="membertype" href="/Object">Object</a>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">listener</span>(<span class="membername">event</span> : <a class="membertype" href="/Event">Event</a>) : <a class="membertype" href="/undefined">undefined</a></div><div class="subfunction"><span class="membername">options</span> : {<table><tr><td><span class="membername">capture</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>removes the listener hooked to the capture phase</td></tr></table><span class="subfunctionclose">}</span></div></div><div class="member-body"><p class="description"></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="removeEventListener_String_EventListener_Object"></a><div class="declaration"><span class="membername primary">removeEventListener</span>(<span class="membername">type</span> : <a class="membertype" href="/String">String</a>, <span class="membername">listener</span> : <a class="membertype" href="/EventListener">EventListener</a>, <span class="membername">options</span> : <a class="membertype" href="/Object">Object</a>) : <a class="membertype" href="/undefined">undefined</a><div class="subfunction"><span class="membername">options</span> : {<table><tr><td><span class="membername">capture</span> :</td><td><a class="membertype" href="/Boolean">Boolean</a></td><td>removes the listener hooked to the capture phase</td></tr></table><span class="subfunctionclose">}</span></div></div><div class="member-body"><p class="description"></p></div></div></div></div></div><a name="Details"></a><h2>Details</h2><div class="details">EventTarget can also be used as a base class to provide event handling for user defined types.<div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
class Foo extends EventTarget {
}
const foo = new Foo();
foo.addEventListener('myEvent', e => {
console.log('myEvent fired. detail:', e.detail);
});
foo.dispatchEvent(new CustomEvent('myEvent', { detail: 'extra data' }));
</textarea><a onclick='executeExample(this.parentNode.parentNode, "EventTarget.EventTarget"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div></div><div class="bottomnav"><a href="/">home</a> <a href="/license">license</a> <a href="https://github.com/nkronlage/JavaScripture">contribute</a> <a href="/feedback">feedback</a> <a id="toggle-theme" href="#">toggle light/dark mode</a></div><div class="copyright">Copyright © JavaScripture Contributors</div></div></div></body><script src="javascripture.js"></script></html>