cfleschhut/example.html

## example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NetTuts: From jQuery to JavaScript</title>
<script type="text/javascript">

var addEvent = (function () {
  var filter = function(el, type, fn) {
    for ( var i = 0, len = el.length; i < len; i++ ) {
      addEvent(el[i], type, fn);
    }
  };
  if ( document.addEventListener ) {
    return function (el, type, fn) {
      if ( el && el.nodeName || el === window ) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        filter(el, type, fn);
      }
    };
  }

  return function (el, type, fn) {
    if ( el && el.nodeName || el === window ) {
      el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
    } else if ( el && el.length ) {
      filter(el, type, fn);
    }
  };
})();


document.addEventListener("DOMContentLoaded", function() {

  // addEvent(document.querySelectorAll('a'), 'click', function() {
  //   console.log(this);
  // });

  [].forEach.call(document.querySelectorAll("a"), function(el, i) {
    // console.log(el, i);
  })

  document.addEventListener("click", function(e) {
    // console.log(e.target.webkitMatchesSelector("ul"));
  }, false);

  [].forEach.call(document.querySelectorAll("#box li"), function(el, i) {
    el.addEventListener("click", function(e) {
      e.target.classList.toggle("wrap");
    }, false);
  });

  var div = document.createElement("div");
  div.innerHTML = "test";
  document.querySelector("#container").appendChild(div);

  // console.log(document.querySelector("#box").nextElementSibling);

});


function ready(cb) {
  // console.log(document.readyState);
  /in/.test(document.readyState) ? setTimeout("ready(" + cb + ")", 9) : cb();
}

ready(function() {

});

</script>
</head>

<body>

<div id="container">

  <div id="box">
    <ul id="list">
      <li id="li1"><a href="#">link</a></li>
      <li id="li2"><a href="#">link</a></li>
      <li id="li3"><a href="#">link</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>NetTuts: From jQuery to JavaScript</title>
	<script type="text/javascript">

	var addEvent = (function () {
	var filter = function(el, type, fn) {
	for ( var i = 0, len = el.length; i < len; i++ ) {
	addEvent(el[i], type, fn);
	}
	};
	if ( document.addEventListener ) {
	return function (el, type, fn) {
	if ( el && el.nodeName \|\| el === window ) {
	el.addEventListener(type, fn, false);
	} else if (el && el.length) {
	filter(el, type, fn);
	}
	};
	}

	return function (el, type, fn) {
	if ( el && el.nodeName \|\| el === window ) {
	el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
	} else if ( el && el.length ) {
	filter(el, type, fn);
	}
	};
	})();


	document.addEventListener("DOMContentLoaded", function() {

	// addEvent(document.querySelectorAll('a'), 'click', function() {
	// console.log(this);
	// });

	[].forEach.call(document.querySelectorAll("a"), function(el, i) {
	// console.log(el, i);
	})

	document.addEventListener("click", function(e) {
	// console.log(e.target.webkitMatchesSelector("ul"));
	}, false);

	[].forEach.call(document.querySelectorAll("#box li"), function(el, i) {
	el.addEventListener("click", function(e) {
	e.target.classList.toggle("wrap");
	}, false);
	});

	var div = document.createElement("div");
	div.innerHTML = "test";
	document.querySelector("#container").appendChild(div);

	// console.log(document.querySelector("#box").nextElementSibling);

	});


	function ready(cb) {
	// console.log(document.readyState);
	/in/.test(document.readyState) ? setTimeout("ready(" + cb + ")", 9) : cb();
	}

	ready(function() {

	});

	</script>
	</head>

	<body>

	<div id="container">

	<div id="box">
	<ul id="list">
	<li id="li1"><a href="#">link</a></li>
	<li id="li2"><a href="#">link</a></li>
	<li id="li3"><a href="#">link</a></li>
	</ul>
	</div>

	</div>

	<script type="text/javascript">

	</script>
	</body>
	</html>