Skip to content

Instantly share code, notes, and snippets.

@evilnapsis

evilnapsis/buttons-js.html

Last active December 31, 2022 19:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evilnapsis/de3873664211abbcb5d87de37886addb to your computer and use it in GitHub Desktop.
Save evilnapsis/de3873664211abbcb5d87de37886addb to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo de Eventos Javascript en Botones
Raw
buttons-js.html
<!DOCTYPE html>
<!-- Powered by Evilnapsis (http://evilnapsis.com/) -->
<html>
<head>
<title>Ejemplo de Eventos Javascript en Botones</title>
</head>
<body>
<h1>Ejemplo de Eventos en Botones</h1>
<button id="mybutton">Mi Boton</button>
<p id="mymarker"></p>
<script>
var button = document.getElementById("mybutton");
var marker = document.getElementById("mymarker");
var click=0, mouseover=0, mouseleave=0, focus=0, blur=0;
button.onclick = function(){
console.log(this.id+": Clicked!");
click++;
update_marker();
}
button.onmouseover = function(){
console.log(this.id+": Mouse Over!");
mouseover++;
update_marker();
}
button.onmouseleave = function(){
console.log(this.id+": Mouse Leave!");
mouseleave++;
update_marker();
}
button.onfocus = function(){
console.log(this.id+": Focus!");
focus++;
update_marker();
}
button.onblur = function(){
console.log(this.id+": Blur!");
blur++;
update_marker();
}
function update_marker(){
marker.innerHTML = "Click: "+ click + " - ";
marker.innerHTML += "Mouseover: "+ mouseover + " - ";
marker.innerHTML += "Mouseleave: "+ mouseleave + " - ";
marker.innerHTML += "Focus: "+ focus + " - ";
marker.innerHTML += "Blur: "+ blur ;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment