JSFiddle - React, Tailwind, and code Playground

by xu xiaofei

HTML

<div id="wraper" tabindex='1'>
just test code in <em>Professional JavaScript for Web Developer</em><br>
just test code in <em>Professional JavaScript for Web Developer</em>

<div id="inner">
  <input id= "input" type="text" placeholder="test" />
  <input id = "btn" type = "button" value = "button">
</div>
</div>

<p id="console">

</p>

CSS

#wraper{
  height:200px;
  width:500px;
  position:relative;
  background:tomato;
}
#inner{
  background:green;
  height:100px;
  width:300px;
  position:absolute;
  bottom:0;
}

JavaScript

//window.addEventListener('scroll',function(event){
//  alert('test scroll')
//})
//window.addEventListener('resize',function(event){
//  alert('test resize')
//})
// document.getElementById('input').addEventListener('blur',function(){
 // alert('test blur')
//},false) 
document.getElementById('input').addEventListener('focus',function(){
  alert('test input focus')
},false)
document.getElementById('wraper').addEventListener('focus',function(event){
  alert('test div focus')
},false)
var i = 0;
document.getElementById('wraper').addEventListener('mouseenter',function(event){
i=i+1;
document.getElementById('console').innerHTML="wraper mouseenter"+i
})
document.getElementById('wraper').addEventListener('mousewheel',function(event){
i=i+1;
document.getElementById('console').innerHTML="wraper mousewheel"+event.wheelDelta
})
//document.getElementById('wraper').addEventListener('mouseover',functio//n(event){
//i=i+1;
//document.getElementById('console').innerHTML="wraper mouseover"+i
//})
//document.getElementById('inner').addEventListener('mouseenter',function(//event){
//document.getElementById('console').innerHTML="inner mouseenter"+i
//})

document.getElementById('btn').addEventListener('click',function(event){
  document.getElementById('console').innerHTML=event.detail;
},true)
//document.getElementById('wraper').addEventListener('click',function(){
 // alert('test div click')
//},true)