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
94
95
96
97
98
99
|
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>Event Test</title>
<script type="text/javascript" src="../base.js"></script>
<script type="text/javascript">
goog.require('goog.events');
goog.require('goog.events.EventType');
</script>
</head>
<body>
<p>
<a id="link1" href="#link1">Link 1</a><br />
<a id="link2" href="#link2">Link 2</a><br />
<a id="link3" href="#link3">Link 3</a><br />
<a id="link4" href="#link4">Link 4</a>
</p>
<p>
<a href="javascript:addListeners()">Listen</a> |
<a href="javascript:removeListeners()">UnListen</a> |
<a href="javascript:removeAll()">Remove All</a> |
<a href="javascript:void(goog.events.unlisten($('link1'), 'click', one))">Remove One</a> |
<a href="javascript:void(goog.events.unlisten($('link1'), 'click', two))">Remove Two</a> |
<a href="javascript:void(goog.events.unlisten($('link1'), 'click', three))">Remove Three</a> |
</p>
<pre id="info"></pre>
<div id="test1" style="background-color: pink;">
Test 1
<div id="test2" style="background-color: lightblue;">
Test 2
<div id="test3" style="background-color: lightyellow;">
Test 3
</div>
Test 2
</div>
Test 1
</div>
<script type="text/javascript">
function $(el) { return document.getElementById(el); }
function handleEventC(e) {
alert('capture');
$('info').innerHTML = "CAPTURE<br>" + goog.events.expose(e).replace(/\n/g, '<br>');
}
function handleEventB(e) {
alert('bubble');
$('info').innerHTML = "BUBBLE<br>" + goog.events.expose(e).replace(/\n/g, '<br>');
}
function one() {
alert('1');
}
function two() {
alert('2');
}
function three() {
alert('3');
}
function addListeners() {
goog.events.listen($('link1'), 'click', one);
goog.events.listen($('link1'), 'click', two);
goog.events.listen($('link1'), 'click', three);
goog.events.listen($('link2'), 'click', handleEventB);
goog.events.listen($('link3'), 'click', handleEventB);
goog.events.listen($('link4'), 'click', handleEventB);
}
function removeListeners() {
goog.events.unlisten($('link1'), 'click', handleEventB);
goog.events.unlisten($('link2'), 'click', handleEventB);
goog.events.unlisten($('link3'), 'click', handleEventB);
goog.events.unlisten($('link4'), 'click', handleEventB);
}
function removeAll() {
goog.events.removeAll();
}
addListeners();
goog.events.listen($('test1'), goog.events.EventType.CLICK, handleEventC,
true, $('test3'));
goog.events.listen($('test1'), goog.events.EventType.CLICK, handleEventB,
false, $('test3'));
alert('howdy');
</script>
</body>
</html>
|
