click

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script language="javascript" type="text/javascript">
/* Document Initialization */
if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', docINIT, false);
}

if (document.all && !window.opera){ //Crude test for IE
//Define a "blank" external JavaScript tag
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
  var contentloadtag=document.getElementById("contentloadtag");
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete")
      docINIT();
      //ie('open');
  }
}
/* END Document Initialization */


function docINIT() {

    var container = document.getElementById('a1');
    var divs = container.getElementsByTagName('div');

    //console.log(divs);

    for (var i=0;i<divs.length;i++) {
        console.log(divs[i].id);

        divs[i].addEventLisenter('click', context(divs[i].id), true);
    }
}

function context(id) {
    console.log(id+' clicked');
}
</script>

<style>
body    {
    margin: 0px;
    font-family: Helvetica;
}
div {
    display: block;
    padding: 20px;
    border: 1px solid rgb(50,50,50);
    background: rgb(40,158,13);
}
div div {
    background: rgb(201,49,19);
}
div div div {
    background: rgb(39,30,134);
    color: rgb(255,255,255);
}
</style>

</head>
<body>
<div context="1" id="a1">
BOX A1
<div context="1" id="b1">
BOX B1
<div context="1" id="b2">BOX B2</div>
</div>
<div context="1" id="c1">BOX C1</div>
</div>
</body>
</html>