event-propagation.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 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>goog.events</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
</script>
<link rel="stylesheet" href="css/demo.css">
<style>

html, body {
  background-color: #FFF;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}


h1 {
  font: normal 24px arial;
  color: #009;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  width: 450px;
}

p {
  font: normal 14px arial;
  color: #999;
  margin-top: 0px;
  margin-left: 10px;
  width: 450px;
}

#tree ul {
  font: normal 12px arial;
  list-style: none;
  margin: 0px;
  padding:0px;
}

#tree ul ul {
  padding-left: 36px;
}

html>body #tree span {
  position: relative;
  top: -2px;
}

#tree div:hover {
  background-color: #EEE;
}

#tree {
  width: 300px;
  height: 800px;
  border: 2px solid #EEE;
  float: left;
}

#log {
  width: 400px;
  height: 800px;
  border: 2px solid #EEE;
  border-left: 0px;
  margin-top: 0px;
  background-color: #FAFAFA;
}

</style>
<script>

var depth = 3;
var breadth = 2;
function writeTree(pos, preId) {
  if (!pos) pos = 0;

  document.write('<ul id="ol' + (preId || '') + '">');

  for (var i = 1; i <= breadth; i++) {
    document.write('<li id="li-' + (preId || '') + i + '">');
    document.write('<div>');
    document.write('<input type="checkbox" id="chk1-' + (preId || '') + i + '" />');
    document.write('<input type="checkbox" id="chk2-' + (preId || '') + i + '" />');
    document.write('<span>');
    document.write((preId || '') + i);
    document.write('</span></div>');
    if (pos < depth) writeTree(pos + 1, (preId || '') + i + '-');
    document.write('</li>');
  }

  document.write('</ul>');
}


// Dirty little buffered log so that logging doesn't affect times.
var start = goog.now();
var buffer = '';
var timer = null;
function log(str) {
  var time = ((new Date()).getTime() - start) / 1000;
  buffer = '[' + time + '] ' + str + '\n' + buffer;
  clearTimeout(timer);
  timer = setTimeout(sendBuffer, 250);
}

function sendBuffer() {
  document.getElementById('log').value = buffer +
      document.getElementById('log').value;
  buffer = '';
}



function doLoad() {
  if (arguments.callee.loaded) return;
  arguments.callee.loaded = true;

  document.getElementById('log').value = '';
  log('LOADED');

  log('Adding handlers');
  var lis = document.getElementById('tree').getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    //lis[i].addEventListener('mousedown', handleCapture, true);
    //lis[i].addEventListener('mousedown', handleBubble, false);
    goog.events.listen(lis[i], 'mousedown', handleCapture, true);
    goog.events.listen(lis[i], 'mousedown', handleBubble, false);
  }
  log('Finished adding handlers');


  goog.events.listen(document.getElementById('log'),
    'dblclick', function() { this.value = ''; });
}

function handleCapture(e) {
  if (e.target.tagName != 'INPUT') {
    var id = e.currentTarget.id.replace(/li\-/, '');

    if (document.getElementById('chk1-' + id).checked) {
      e.stopPropagation();
      log('Capture - ' + id + ' [Cancelled]');
    } else {
      log('Capture - ' + id);
    }
  }
}

function handleBubble(e) {
  if (e.target.tagName != 'INPUT') {
    var id = e.currentTarget.id.replace(/li\-/, '');

    if (document.getElementById('chk2-' + id).checked) {
      e.stopPropagation();
      log('Bubble - ' + id + ' [Cancelled]');
    } else {
      log('Bubble - ' + id);
    }
  }
}

goog.events.listen(window, 'load', doLoad);

</script>
</head>
<body>
  <h1>goog.events - Stop Propagation</h1>
  <p><strong>Test the cancelling of capture and bubbling events.</strong>  Click
  one of the nodes to see the event trace, then use the check boxes to cancel the
  capture or bubble at a given branch.
  (Double click the text area to clear it)</p>

  <div id="tree">
  <script>writeTree();</script>
  </div>

  <textarea id="log"></textarea>

  </body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/event-propagation.html
