stubbornella/jsbin.akIZINi.html

## jsbin.akIZINi.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
  <div class="text">text to be replaced</div>
  <ul>
	<li>foo - clicks here should not alert</li>
    <li>bar</li>
    <li>baz</li>
  </ul>
  latest...
</body>
</html>

## jsbin.akIZINi.js
/* tests:
 *
 * 1. click on children of .text should alert their index - PASS
 * 2. click on other elements should not - PASS
 * 3. if two nodes have the same content, a click on the latter should not return the index of the former - PASS
 */

// how to make it execute after document is loaded?
var content = "<div>a</div><div>e</div><div>t</div><div>7</div><div>1</div><div>a</div>",
    textNodes = document.getElementsByClassName("text")[0];  // what if the server returned json, or content was an array.

textNodes.innerHTML = content;


function findIndex(node) { // does js have an api for the index?
	var siblings,
		sibling,
		index;

	siblings = node.parentNode.children;

	for (index=0; index<siblings.length; index++) {
		if (siblings[index] == node) return index;
	}
	return -1; // no match found, this should not happen
}

function registerEventHandler(node, event, handler) {
	if (typeof node.addEventListener == "function") {
		node.addEventListener(event, handler, false);
	}
	else {
		node.attachEvent("on" + event, handler);
	}
}

function normaliseEvent(event) {
  if (!event.stopPropagation) {
    event.stopPropagation = function() {this.cancelBubble = true;};
    event.preventDefault = function() {this.returnValue = false;};
  }
  if (!event.stop) {
    event.stop = function() {
      this.stopPropagation();
      this.preventDefault();
    };
  }

  if (event.srcElement && !event.target)
    event.target = event.srcElement;
  if ((event.toElement || event.fromElement) && !event.relatedTarget)
    event.relatedTarget = event.toElement || event.fromElement;
  if (event.clientX !== undefined && event.pageX === undefined) {
    event.pageX = event.clientX + document.body.scrollLeft;
    event.pageY = event.clientY + document.body.scrollTop;
  }
  if (event.type == "keypress") {
    if (event.charCode === 0 || event.charCode === undefined)
      event.character = String.fromCharCode(event.keyCode);
    else
      event.character = String.fromCharCode(event.charCode);
  }

  return event;
}

function addHandler(node, type, handler) {
  function wrapHandler(event) {
    handler(normaliseEvent(event || window.event));
  }
  registerEventHandler(node, type, wrapHandler);
  return {node: node, type: type, handler: wrapHandler};
}

function removeHandler(object) {
  unregisterEventHandler(object.node, object.type, object.handler);
}

var foo = addHandler(textNodes,"click", function(event) {
  alert(findIndex(event.target));
});


## jsbin.akIZINi.less
ul {
  padding: 0;
  list-style-type: none;
  li {
    background-color: #e2e2e2;
    padding: 10px;
    border-bottom: solid 10px gray;
  }
}

.text div{
  background-color: #e2e2e2;
  padding: 10px;
  border-bottom: solid 10px gray;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>

	</head>
	<body>
	<div class="text">text to be replaced</div>
	<ul>
	<li>foo - clicks here should not alert</li>
	<li>bar</li>
	<li>baz</li>
	</ul>
	latest...
	</body>
	</html>
	/* tests:
	*
	* 1. click on children of .text should alert their index - PASS
	* 2. click on other elements should not - PASS
	* 3. if two nodes have the same content, a click on the latter should not return the index of the former - PASS
	*/

	// how to make it execute after document is loaded?
	var content = "<div>a</div><div>e</div><div>t</div><div>7</div><div>1</div><div>a</div>",
	textNodes = document.getElementsByClassName("text")[0]; // what if the server returned json, or content was an array.

	textNodes.innerHTML = content;


	function findIndex(node) { // does js have an api for the index?
	var siblings,
	sibling,
	index;

	siblings = node.parentNode.children;

	for (index=0; index<siblings.length; index++) {
	if (siblings[index] == node) return index;
	}
	return -1; // no match found, this should not happen
	}

	function registerEventHandler(node, event, handler) {
	if (typeof node.addEventListener == "function") {
	node.addEventListener(event, handler, false);
	}
	else {
	node.attachEvent("on" + event, handler);
	}
	}

	function normaliseEvent(event) {
	if (!event.stopPropagation) {
	event.stopPropagation = function() {this.cancelBubble = true;};
	event.preventDefault = function() {this.returnValue = false;};
	}
	if (!event.stop) {
	event.stop = function() {
	this.stopPropagation();
	this.preventDefault();
	};
	}

	if (event.srcElement && !event.target)
	event.target = event.srcElement;
	if ((event.toElement \|\| event.fromElement) && !event.relatedTarget)
	event.relatedTarget = event.toElement \|\| event.fromElement;
	if (event.clientX !== undefined && event.pageX === undefined) {
	event.pageX = event.clientX + document.body.scrollLeft;
	event.pageY = event.clientY + document.body.scrollTop;
	}
	if (event.type == "keypress") {
	if (event.charCode === 0 \|\| event.charCode === undefined)
	event.character = String.fromCharCode(event.keyCode);
	else
	event.character = String.fromCharCode(event.charCode);
	}

	return event;
	}

	function addHandler(node, type, handler) {
	function wrapHandler(event) {
	handler(normaliseEvent(event \|\| window.event));
	}
	registerEventHandler(node, type, wrapHandler);
	return {node: node, type: type, handler: wrapHandler};
	}

	function removeHandler(object) {
	unregisterEventHandler(object.node, object.type, object.handler);
	}

	var foo = addHandler(textNodes,"click", function(event) {
	alert(findIndex(event.target));
	});
	ul {
	padding: 0;
	list-style-type: none;
	li {
	background-color: #e2e2e2;
	padding: 10px;
	border-bottom: solid 10px gray;
	}
	}

	.text div{
	background-color: #e2e2e2;
	padding: 10px;
	border-bottom: solid 10px gray;
	}