<html>

<body id="myid2" class="mystyle your">

 <div id="myid"> father

  <div class="2"> son</div>

  </div>
  

<div id="jmyid"> jqueryfather
<div class="j2"> jqueryson</div>
</div>

<script type="text/javascript">

document.getElementById("myid").addEventListener("click",function(e){alert("father called"); },true);
document.getElementsByClassName("2")[0].addEventListener("click",function(e){alert("son called");e.stopPropagation();},true);
x=document.getElementsByTagName('body')[0];
$("#jmyid").click(function(event){
alert("jquery father called");
event.stopPropagation();
});
$(".j2").click(function(event){
alert("jquery son called");
//event.stopPropagation();
return false;
});

document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);

</script>

</body>

</html>