<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<ul id="button">
<li><button>1</button></li>
<li><button>2</button></li>
<li><button>3</button></li>
<li><button>4</button></li>
<li class="left"><button>5</button></li>
<li class="social-icons20x20-5"><button>6</button></li>
<li class="ibm-access"><button>7</button></li>
<li><button>8</button></li>
<li><button>9</button></li>
<li><button>10</button></li>
</ul>
<script type="text/javascript">
(function init(){
var liarr = document.getElementById("button");
liarr.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() === 'button'){
console.log("the catch is OK");
}
}
})();
</script>
</body>
</html>