JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="myElement">
    Extends the Element type to include event-delegation in its event system.
    <a href="javascript:;">Test</a>
</div>


<p id="test2"><a href="javascript:;" class="myStyle">Test 2</a></p>


<p><button type="button">Test 3</button></p>

CSS

#myElement {
    border:solid 1px #ccc;
    padding:10px;
    margin:10px;
}
p{margin:10px;}

JavaScript

var myElement = $('myElement');

// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    target.setStyle('color', [Number.random(1, 255), Number.random(1, 255), Number.random(1, 255)].rgbToHex());
});

// Alerts when an anchor element with class 'myStyle' is clicked inside of myElement
document.id("test2").addEvent('click:relay(a.myStyle)', function(){
    alert('hello');
});
 
 
document.addEvent('click:relay(button)', function(event, clicked){
    event.preventDefault(); //don't follow the link
    alert('you clicked a button!');
    // You can reference the element clicked with the second
    // Argument passed to your callback
    clicked.setStyle('color', '#777');
});