Javascript/addEventListener

var sample1Btn = document.getElementById("sample1Btn");
var sample1p = document.getElementById("sample1p");
var x = 0;
sample1p.innerHTML = x;
sample1Btn.addEventListener("click", function(){
  sample1p.innerHTML = x++;
});
	

var s2Number = document.getElementById("s2Number");
s2Number.addEventListener("change", function(){
  s2Number.after(s2Number.value);
});
	

var s3TextArea = document.getElementById("s3TextArea");
var s3Span = document.getElementById("s3Span");
s3TextArea.addEventListener("keyup", function(){
  s3Span.innerText = this.value.length;
});
	

var s4Div = document.getElementById("s4Div");
function s4Func(){
  s4Div.classList.add("s4Class") ;
  clearTimeout(s4Time) ;
  var s4Time = setTimeout(function(){
	s4Div.classList.remove("s4Class") ;
  }, 500);
}
window.addEventListener("scroll", s4Func);

function s5Func(e) {
    //座標の取得
    var x = e.pageX;
    var y = e.pageY;
    //しずくになるdivの生成、座標の設定
    var s5Div = document.createElement("div");
    s5Div.style.top = y + "px";
    s5Div.style.left = x + "px";
    document.body.appendChild(s5Div);
    //アニメーションをする className を付ける
    s5Div.className = "sizuku";
    //アニメーションが終わった事を感知してしずくを remove する
    s5Div.addEventListener("animationend", function() {
        this.parentNode.removeChild(this);
    }, false);
}