JS Event Delegate

<! DOCTYPE html>
<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=0 ">
<meta charset= "Utf-8" >

<style>
*{
padding:0;
margin:0;
border:0;
}
</style>
<script type= "Text/javascript" src= "Zepto.min.js" ></script>

<body style= "width:100%;height:100%;" >
<ul id= "ul" >
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<button id= "btn" style= "width:100px;height:100px;" ></button>
<button id= "btn1" style= "width:100px;height:100px;" ></button>
</body>
<script>
Window.onload = function () {
var Oul = document.getElementById ("ul");
var aLi = oul.getelementsbytagname ("Li");
var obtn = document.getElementById ("btn");
var inow = 4;

Oul.onclick = function (EV) {
var ev = EV | | window.event;
var target = Ev.target | | Ev.srcelement;
if (target.nodeName.toLowerCase () = = "Li") {
Target.style.background = "Red";
}
}
Obtn.onclick = function () {
Inow + +;
var oLi = document.createelement ("Li");
oli.innerhtml = 1111 *inow;
Oul.appendchild (OLi);
}
}
</script>

JS Event Delegate