事件详解
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 </head> 7 <style type="text/css"> 8 div{ 9 width: 200px; 10 height: 200px; 11 background: red; 12 } 13 </style> 14 15 <body> 16 <div id="test">aaa</div> 17 <form> 18 <input type="text" /> 19 <input type="submit" value="提交"/> 20 </form> 21 <script type="text/ecmascript"> 22 var oDiv = document.getElementById("test"); 23 var oForm = document.getElementsByTagName("form")[0]; 24 var onInput = document.getElementsByTagName("input"); 25 26 oForm.onsubmit = function(){ 27 console.log("sumbit"); 28 return false; 29 } 30 31 onInput[0].onfocus = function(){ 32 console.log("focus"); 33 } 34 35 onInput[0].onblur = function(){ 36 console.log("blur"); 37 } 38 39 onInput[0].onchange = function(){ 40 console.log("change"); 41 } 42 43 onInput[0].oninput = function(){ 44 console.log("input"); 45 } 46 47 </script> 48 49 </body> 50 </html>
oDiv.onclick = function(e){
//console.log(e);
var vet = e ||event;//使用事件对象，通常要加上，否则会有bug
console.log(vet);
}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 </head> 7 <style type="text/css"> 8 div{ 9 width: 100px; 10 height: 1000px; 11 background: red; 12 } 13 </style> 14 15 <body> 16 <div id="test">aaa</div> 17 18 <script type="text/ecmascript"> 19 var oDiv = document.getElementById("test"); 20 oDiv.onclick = function(e){ 21 22 var vet = e ||event;//使用事件对象，通常要加上，否则会有bug 23 console.log(vet.clientX,vet.clientY);//鼠标点击距当前浏览器内可视区域x，y的坐标。 24 console.log(vet.pageX,vet.pageY);//鼠标点击距整个完全页面XY坐标。 25 console.log(vet.offsetX,vet.offsetY);//相对于带有定位父盒子X，Y的坐标 26 27 } 28 29 </script> 30 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 <style type="text/css"> 7 div{ 8 position: relative; 9 width: 500px; 10 height: 500px; 11 border: 1px solid #0000FF; 12 } 13 span{ 14 position: absolute; 15 bottom: 0; 16 } 17 </style> 18 </head> 19 <body> 20 <div > 21 <span></span> 22 </div> 23 <script type="text/ecmascript"> 24 var oDiv = document.getElementsByTagName("div")[0]; 25 var oSpan = document.children[0]; 26 oDiv.onmousemove = function(e){ 27 var vet = e || event; 28 var x = vet.clientX; 29 var y = vet.clientY; 30 oSpan.innerHTML= x + "," + y + "px"; 31 } 32 oDiv.onmouseout = function(){ 33 oSpan.innerHTML = ""; 34 } 35 </script> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 7 </head> 8 <body> 9 <script type="text/ecmascript"> 10 document.onKeypress = function(){//按下字符键触发 11 console.log("Keypress"); 12 } 13 document.onKeydown = function(){//按下任意键时触发 14 console.log("Keypress"); 15 } 16 document.onkeydown = function(e){ 17 var vet = e || event; 18 console.log(vet.altKey,vet.ctrlKey,vet.shiftKey);//判断是否找到某个键 19 console.log(vet.KeyCode); 20 21 } 22 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>docoment</title> 6 <style type="text/css"> 7 div{ 8 width: 500px; 9 height: 500px; 10 border: 1px solid #0000FF; 11 } 12 </style> 13 14 15 </head> 16 <body> 17 <div></div> 18 <input type="txt" /><input type="button" value="发布" /> 19 <script type="text/ecmascript"> 20 var oDiv = document.getElementsByTagName("div")[0]; 21 var aInput = document.getElementsByTagName("input"); 22 aInput[1].onclick = commentTxt; 23 24 function commentTxt(){ 25 oDiv.innerHTML += aInput[0].value; 26 } 27 28 aInput[0].onkeydown = function(e){ 29 var evt = e || event; 30 if(evt.ctrlKey && evt.KeyCode == 13){ 31 commentTxt(); 32 } 33 } 34 35 </script> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="">text</a> 9 <form> 10 <input type="text" /> 11 <input type="submit" value="提交" /> 12 </form> 13 <script type="text/javascript"> 14 var oLink = document.getElementsByTagName("a")[0]; 15 var oForm = document.getElementsByTagName("form")[0]; 16 var aInput = document.getElementsByTagName("input"); 17 oLink.onclick = function(e){ 18 var evt = e || event; 19 console.log("aaa"); 20 //return false; 21 //evt.preventDefault(); 22 evt.returnValue = false; 23 } 24 oForm.onsubmit = function(){ 25 console.log("aaa"); 26 return false; 27 } 28 29 aInput[0].onkeydown = function(){ 30 return false; 31 } 32 document.oncontextmenu = function(){ 33 return false; 34 } 35 36 37 </script> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #outer{ 8 width: 200px; 9 height: 200px; 10 background: red; 11 } 12 #inner{ 13 width: 100px; 14 height: 100px; 15 background: blue; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="outer"> 21 <div id="inner"></div> 22 </div> 23 <script type="text/javascript"> 24 var outer = document.getElementById("outer"); 25 var inner = document.getElementById("inner"); 26 27 //outer.onclick = foo; 28 //outer.onclick = bar;//已覆盖outer1输出outer2 29 30 //outer.addEventListener("click",foo,false) 31 //inner.addEventListener("click",bar,true); 32 33 //outer.addEventListener("click",foo); 34 //outer.removeEventListener("click",bar); 35 //outer.removeEventListener("click",bar); 36 37 //IE浏览器 38 //outer.attachEvent("click",foo); 39 //outer.detachEvent("click",foo); 40 41 function foo(){ 42 console.log("outer1"); 43 } 44 45 function bar(){ 46 console.log("outer2"); 47 } 48 function baz(){ 49 console.log("inner"); 50 } 51 52 //封装函数实现上述过程 53 function addEvent(obj,type,fun){ 54 if(obj.addEventListener){ 55 obj.addEventListener(type,fun,false); 56 }else{ 57 obj.attachEvent("on"+type,fun); 58 } 59 } 60 function removeEvent(obj,type,fun){ 61 if(obj.removeEventListener){ 62 obj.removeEventListener(type,fun,false); 63 }else{ 64 obj.deachEvent("on"+type,fun); 65 } 66 } 67 68 addEvent(outer,"click",foo); 69 removeEvent(outer,"click",foo); 70 71 </script> 72 </body> 73 </html>
cookie：是指缓存在本地客户端的数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 </head> 8 <body> 9 <script type="text/javascript"> 10 function setCookie(name,value,day){ 11 var oDate = new Date(); 12 oDate.setDate(oDate.getDate()+day); 13 document.cookie = name + "="+value+";expires"+oDate; 14 } 15 setCookie("name1","honny1",1); 16 setCookie("name2","honny2",1); 17 18 console.log(document.cookie); 19 20 function getCookie(name){ 21 var str = document.cookie; 22 var arr = str.split("; "); 23 for (var i=0; i<arr.length;i++){ 24 var arr1 = arr[i].spilt("="); 25 if(arr1[0] == name){ 26 return arr1[1]; 27 } 28 } 29 } 30 31 console.log(getCookie("name2")); 32 33 function removeCookie(name){ 34 setCookie(name,1,-1); 35 } 36 37 removeCookie("name1"); 38 console.log(getCookie("name1")); 39 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 用户名：<input type="text" /> 9 密码：<input type="password" /> 10 <label><input type="checkbox" />七天免登陆</label> 11 <input type="button" value="登录" /> 12 13 <script type="text/javascript"> 14 15 function setCookie(name,value,day){ 16 var oDate = new Date(); 17 oDate.setDate(oDate.getDate()+day); 18 document.cookie = name + "="+value+";expires"+oDate; 19 } 20 setCookie("name1","honny1",1); 21 setCookie("name2","honny2",1); 22 23 console.log(document.cookie); 24 25 function getCookie(name){ 26 var str = document.cookie; 27 var arr = str.split("; "); 28 for (var i=0; i<arr.length;i++){ 29 var arr = arr[i].spilt("="); 30 if(arr[0] == name){ 31 return arr[1]; 32 } 33 } 34 } 35 36 console.log(getCookie("name2")); 37 38 function removeCookie(name){ 39 setCookie(name,1,-1); 40 } 41 42 removeCookie("name1"); 43 console.log(getCookie("name1")); 44 45 46 var aInput = document.getElementsByTagName("Input"); 47 48 if(getCookie("username")){ 49 aInput[0].value = getCookie("username"); 50 aInput[1].value = getCookie("password"); 51 } 52 53 aInput[3].onclick =function(){ 54 var username = aInput[0].value; 55 var password = aInput[1].value; 56 if(aInput[2].checked){ 57 setCookie("username",username,7); 58 setCookie("password",password,7); 59 } 60 } 61 </script> 62 </body> 63 </html>
