JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div class="bar">
    <div class="foo" rel="modal"></div>
</div>

CSS

.foo {
    background: blue;
    width: 20px;
    height: 20px;
}

.bar .foo {
    background: red;
}

JavaScript

var foo = document.querySelectorAll(".foo")[0];

foo.addEventListener("click", function() {
   //alert("normal"); 
});

document.addEventListener("click", function(event) {
    if (event.target.className.indexOf("foo") > -1) {
        //alert("foo");        
    }
});

$(document).on("click", "[rel='modal']", function() {
    
});

function Foo(x, y) {
    console.log(this, this.bar);
    console.log(x + y);
}

Foo(1, 2);
/*      context, x, y */
Foo.apply({
    bar: "bazinga"
}, [1, 2]);






var Events = {
    init: function() {
        this.name = "foo";
        
        $(".foo").on("click", this.fooClicked.bind(this));    
    },
    fooClicked: function() {
        console.log(this);
    }
};


Events.init();