Created
May 11, 2015 08:12
-
-
Save lduboeuf/b3fccd35e36d2bf30309 to your computer and use it in GitHub Desktop.
exemple abonnements évènements js /html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="ISO-8859-1"> | |
| <title>Insert title here</title> | |
| <style> | |
| #error_message { | |
| color: red; | |
| } | |
| #appender { | |
| background-color: #CCCCCC; | |
| } | |
| #remover { | |
| background-color: red; | |
| } | |
| #remover, #appender { | |
| text-align: center; | |
| display: inline-block; | |
| width:50px; | |
| height: 50px; | |
| font-size: 3em; | |
| } | |
| #div1 {width:350px;height:250px;padding:10px;border:1px solid #aaaaaa;} | |
| </style> | |
| <script> | |
| var msg = document.getElementById("error_message"); | |
| //default video div is hidden | |
| //document.getElementById("video").style.visibility = "hidden"; | |
| function allowDrop(ev) { | |
| ev.preventDefault(); | |
| } | |
| function drag(ev) { | |
| ev.dataTransfer.setData("text", ev.target.id); | |
| } | |
| function drop(ev) { | |
| ev.preventDefault(); | |
| var data = ev.dataTransfer.getData("text"); | |
| ev.target.appendChild(document.getElementById(data)); | |
| } | |
| function display_info(){ | |
| //document.getElementById("video").style.visibility = "visible"; | |
| document.getElementById("info").value = "kikou"; | |
| document.getElementById("error_message").innerHTML = "oulala, ça plantouille là!"; | |
| } | |
| function add_info(){ | |
| var p = document.createElement("p"); | |
| p.innerHTML = "oulalalalalalala!"; | |
| document.getElementById("display").appendChild(p); | |
| } | |
| function remove_info(){ | |
| var d = document.getElementById("display"); | |
| if (d!="undefined") | |
| d.removeChild(d.lastChild); | |
| } | |
| function setupListeners(){ | |
| document.getElementById("btnOK").addEventListener('click', display_info, false); | |
| document.getElementById("appender").addEventListener('mouseover', add_info, false); | |
| document.getElementById("remover").addEventListener('mouseover', remove_info, false); | |
| window.addEventListener("keydown", function(e){ | |
| console.log(e.keyCode); | |
| if (e.keyCode==46){ | |
| remove_info(); | |
| } | |
| }, true); | |
| } | |
| window.addEventListener("load", function(){ | |
| document.getElementById("btnOK").addEventListener('click', display_info, false); | |
| document.getElementById("appender").addEventListener('mouseover', add_info, false); | |
| document.getElementById("remover").addEventListener('mouseover', remove_info, false); | |
| window.addEventListener("keydown", function(e){ | |
| console.log(e.keyCode); | |
| if (e.keyCode==46){ | |
| remove_info(); | |
| } | |
| }, true); | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <input type="text" id="info" placeholder="rien du tout" value=""/> | |
| <input type="button" id="btnOK" value="ok"/> | |
| <p id="error_message"> | |
| </p> | |
| <div id="appender"> | |
| + | |
| </div> | |
| <div id="remover"> | |
| - | |
| </div> | |
| <div id="display"> | |
| </div> | |
| <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| <img id="drag1" src="img/cochon.jpg" draggable="true" ondragstart="drag(event)"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment