<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ 200px; height: 200px; background: chartreuse; } </style> </head> <body> <div id="test"> div框</div> <form> <input type="text" /> <input type="submit" value="提交"/> </form> <script type="text/javascript"> window.onload=function(){ var oDIV=document.getElementById("test"); oDIV.onclick=function(e){ // alert(this.innerHTML); console.log(e); } /* oDIV.onmouseover=function(){ alert(this.innerHTML); }*/ var ofrom= document.getElementsByTagName("form")[0]; var input= document.getElementsByTagName("input"); ofrom.onsubmit = function(){ console.log("submit"); return false; } input[0].onfocus=function(){ console.log("onfocus"); } input[0].onblur=function(){ console.log("onblur"); } input[0].onchange=function(){ console.log("onchange"); } input[0].oninput=function(){ console.log("oninput"); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /* document.onkeypress=function(){ console.log("keypress"); }*/ /* document.onkeydown=function(){ console.log("onkeydown"); }*/ document.onkeydown=function(e){ var evt= e||event; //console.log(evt.altKey,evt.ctrlKey,evt.shiftKey); console.log(evt.keyCode); } </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ 400px; height: 400px; border: 1px solid #c9e2b3; } </style> </head> <body> <div></div> <input type="text"/> <input type="submit" value="fabu"/> <script type="text/javascript"> var oDIV=document.getElementsByTagName("div")[0]; var aINPUT=document.getElementsByTagName("input"); /* aINPUT[1].onclick=commentTxt;*/ function commentTxt(){ oDIV.innerHTML+=aINPUT[0].value; } aINPUT[1].onkeydown=function(e){ var evt= e||event; //console.log(evt.altKey,evt.ctrlKey,evt.shiftKey); console.log(evt.keyCode); if (evt.ctrlKey && evt.keyCode==13){ commentTxt(); } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #outer{ 200px; height: 200px; background: red; } #inner { 100px; height: 100px; background: blue; } </style> </head> <body> <div id="outer"> <div id="inner"> </div> </div> <script type="text/javascript"> var outer = document.getElementById("outer"); var inner=document.getElementById("inner"); outer.onclick=function(){ console.log("outer"); } inner.onclick=function(e){ var evt= e || event; console.log("inner"); // 阻止冒泡 不让起点击inner div 时 ，打印inner和outer // evt.cancelBubble=true; evt.stopPropagation(); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li{ margin: 10px; background: red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script type="text/javascript"> var aul=document.getElementsByTagName("ul")[0]; var ali=document.getElementsByTagName("li"); /* for(var i=0;i<ali.length;i++){ ali[i].onclick=function(){ console.log(this.innerHTML); } }*/ // 时间委托 aul.onclick=function( e ){ var evt= e || event; var _target=evt.target ||evt.srcElement; if (_target.nodeName.toUpperCase()=="LI"){ console.log(_target.innerHTML); } } //在 ul 标签后追加 5 li标签 for(var i=0;i< 5;i++){ var oli= document.createElement("li"); oli.innerHTML=i; aul.appendChild(oli); } </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> </head> <body> <a href="">test</a> <form> <input type="text"/> <input type="submit" value="sumint"/> </form> <script type="text/javascript"> var olink=document.getElementsByTagName("a")[0]; var oform=document.getElementsByTagName("form")[0]; var oinput=document.getElementsByTagName("input")[0]; //阻止跳转 olink.onclick=function(e){ var evt= e ||event; console.log("aaa"); evt.returnValue=false; } //阻止提交 oform.onsubmit=function(){ console.log("submit"); return false; } //阻止输入文本框 oinput.onkeydown=function(){ console.log("input"); return false; } //阻止鼠标右键 document.oncontextmenu=function(){ console.log("rigth"); return false; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #outer{ 200px; height: 200px; background: red; } #inner { 100px; height: 100px; background: blue; } </style> </head> <body> <div id="outer"> <div id="inner"> </div> </div> <script type="text/javascript"> var outer = document.getElementById("outer"); var inner=document.getElementById("inner"); // 和下面的比较是：会覆盖掉一个点击事件 outer.onclick=null 如果移除当前事件。可以赋值null /* outer.onclick=foo; outer.onclick=foo1; */ // 注意：可以加上两个点击事件，不冲突 outer.addEventListener("click",foo,false); outer.addEventListener("click",foo1,false); // 如果移除 outer.removeEventListener("click",foo); outer.removeEventListener("click",foo1); function foo(){ console.log("outer1"); } function foo1(){ console.log("inner"); } </script> </body> </html>