Andreas Hocevar
95 lines
2.8 KiB
HTML
95 lines
2.8 KiB
HTML
<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: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);
|
|
}
|
|
|
|
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>
|