JSFiddle - React, Tailwind, and code Playground

by Louis Tsang

HTML

<div id="content">
    <p>Click Me!</p>
    <a href="www.scholat.com/zengweiquan">Fllow Me!</a>
</div>
<div id="result">
</div>

JavaScript

var _div = document.querySelector("div#content");
var _p   = document.querySelector("p");
var _a   = document.querySelector("a");
var _divResult = document.querySelector("div#result");

//Capturing
_div.addEventListener("click", function(event){
    var event = event || window.event;
    var eventType = event.type;
    var eventTarget = event.target;
    var eventCurrentTarget = event.currentTarget;
    var eventPhase = event.eventPhase;
    var eventCancelable = event.cancelable;
    var eventBubble = event.bubbles;
    
    var content = "eventType: " + eventType + "<br/>"
    			+ "eventTarget: " + eventTarget + "<br/>"
    			+ "eventCurrentTarget: " + eventCurrentTarget + "<br />"
    			+ "eventPhase: " + eventPhase + "<br />"
    			+ "eventCancelable: " + eventCancelable + "<br />"
    			+ "eventBubbles: " + eventBubble + "<br />"
    			+ "==========================================<br />";
    
    _divResult.innerHTML = content;
    
}, true);

//Bubbling
_div.addEventListener("click", function(event){
    var event = event || window.event;
    var eventType = event.type;
    var eventTarget = event.target;
    var eventCurrentTarget = event.currentTarget;
    var eventPhase = event.eventPhase;
    var eventCancelable = event.cancelable;
    var eventBubble = event.bubbles;
    
    var content = "eventType: " + eventType + "<br/>"
    			+ "eventTarget: " + eventTarget + "<br/>"
    			+ "eventCurrentTarget: " + eventCurrentTarget + "<br />"
    			+ "eventPhase: " + eventPhase + "<br />"
    			+ "eventCancelable: " + eventCancelable + "<br />"
    			+ "eventBubbles: " + eventBubble + "<br />"
    			+ "==========================================<br />";
    
    _divResult.innerHTML += content;
}, false);

_p.addEventListener("click", function(event){
    var event = event || window.event;
    var eventPhase = event.eventPhase;
    
    var content = "eventPhase: " + eventPhase + "<br />"
    			+ "==========================================<br />";
...