vladocar

function delegate(selectorParent, selectorChild, type, fn) {
        var i = selectorParent.length;
        while (i--) {
            selectorParent[i].addEventListener(type, function (e) {

                if ((selectorChild.indexOf(e.target)) >= 0) {


                    console.log("This", e.type, " was clicked!");

vladocar

document.getElementById("main").addEventListener("click", function (e) {

        if ($("ul>li>a,#paragraph>a").indexOf(e.target) >= 0) {

            console.log("Clicked!");
            alert("Clicked!");
        }


    }, false);

vladocar

#main {  margin:0 auto;  width:900px;}

#header{
float:left;
width:900px;
}

#footer{
float:left;	
width:900px;

vladocar

<div id="main">

	<div id="header">#header</div>

	<div id="navigation">#navigation</div>

	<div id="content">#content</div>

	<div id="sidebar">#sidebar</div>

vladocar

#main {  margin:0 auto;  width:900px;}

.w150,.w600,.w900 {float:left;}

.w900 {width:900px;}
.w600 {width:600px;}
.w150 {width:150px;}

vladocar

<div id="main">

	<div id="header" class="w900"> </div>

	<div id="navigation" class="w150"> </div>

	<div id="content" class="w600"> </div>

	<div id="sidebar" class="w150"> </div>

vladocar

/* w for width */

.w150, .w300, .w450, .w600, .w750, .w900 {float:left;}

.w150{width:150px}
.w300{width:300px}
.w450{width:450px}
.w600{width:600px}
.w750{width:750px}
.w900{width:900px}

vladocar

function extendAll() {

    var i = arguments.length;

    function F() {}

    function N() {}

    while (i--) {

vladocar

function extend() {

    var i = arguments.length;

    function F() {}

    while (i--) {

        for (var m in arguments[i]) {
            F.prototype[m] = arguments[i][m];

vladocar

var selector = {

    select: function (selector) {
        this.value = Array.prototype.slice.call(document.querySelectorAll(selector));
        return this;
    }
};

var loop = {
    each: [].forEach,