Global and local events

Events understanding

by roskoshinsky

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="box-a" id="a" >
  <div class="box-b" id="b" >
    <div class="box-c" id="c" >
      Hello
    </div>
  </div>
</div>
<div id="log" >
log…
</div>

CSS

html {width:100%; height:100%;}
html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0px; margin:0px; border:0px; font-size:0px; font-weight:0; font-family:Helvetica, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {width:100%; height:100%;}

div {width:50%; height:50%; border:1px solid black; font-size:14px; color:black;}

.box-a {background:red;}
.box-b {background:green;}
.box-c {background:yellow;}

JavaScript

$(document).ready(function(){
	$("#log").html("well!");
}); // ready

(function($){

   jQuery.on = function(sEvent, cbEvent){
      return $(document).on(sEvent, cbEvent);
   }; // jQuery.on

   jQuery.trigger = function(sEvent, oData){
      if(oData){
         return $(document).trigger(sEvent, oData);
      } else {
         return $(document).trigger(sEvent);
      } // if
   }; // jQuery.trigger

   jQuery.off = function(sEvent){
      if(sEvent){
         return $(document).off(sEvent);
      } else {
         return $(document).off();
      } // if
   }; // jQuery.off

   jQuery.fn.element = function(){
      return this.get(0);
   }; // jQuery.fn.element

   jQuery.fn.id = function(){
      return this.get(0).id;
   }; // jQuery.fn.id

})(jQuery);