事件相关内容
通过box.onclick=function(e){}这种方法只能为对象添加一个事件函数，方法比较low。
addEventListener()方法为对象添加监听事件：
事件函数的第一个参数是事件对象，（必须在事件函数没有进行传参的时候）
事件函数有传参行为时，事件对象是最后一个 形参来接收。
box.addEventListener("click",fn)//标准浏览器
function fn() {
alert(this)
}
1 box.addEventListener("click",fn.bind(box,2,3,4,5,6,7)) 2 3 function fn() { 4 alert(arguments.length-1)//返回最后一个参数的下表 5 console.log(arguments[arguments.length-1])//事件对象，是最后一个参数 6 // alert(arguments[0]+arguments[1]) 7 }
该方法不兼容IE678。
attachEvent（‘‘onclick’‘，fn）此方法兼容IE678
1 box.attachEvent("onclick",fn)//IE678 2 3 function fn() { 4 alert(this) 5 }
添加事件的函数封装：addEvent（）
1 addEvent(box,"click",function () { 2 alert(3) 3 }); 4 addEvent(box,"click",function () { 5 alert(5) 6 }); 7 addEvent(box,"click",function () { 8 alert(6) 9 }); 10 11 removeEvent(box,"click",function () { 12 alert(6) 13 }); 14 15 16 17 18 19 20 //添加事件 21 function addEvent(obj,eName,eFn) { 22 if(!-[1,]){ //判断支不支持attacgevent方法，如果支持就是ie678 23 obj.attachEvent("on"+eName,function () { 24 eFn.call(obj) 25 }) //兼容IE678 26 }else{ 27 obj.addEventListener(eName,eFn)//兼容标准浏览器 28 } 29 }
事件监听的匿名函数如何解绑：
1 box.addEventListener("click",function () { 2 alert(1) 3 }) 4 5 box.removeEventListener("click",function () { 6 alert(1) 7 })
案例：
1.盒子的拖拽与拉伸
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content="FengYu"> 6 <title>Tz-34期Js</title> 7 <style> 8 *{margin:0;padding:0;font-family: Microsoft YaHei,serif;} 9 li{list-style: none;} 10 #box{ 11 position: absolute; 12 top:100px; 13 left:100px; 14 width:100px; 15 height: 100px; 16 background: pink; 17 } 18 #sbox{ 19 position: absolute; 20 bottom:0; 21 right:0; 22 width:5px; 23 height: 5px; 24 background: red; 25 26 } 27 </style> 28 <!--<script src="https://git.oschina.net/cx-fy/personal/raw/master/conmenu.js"></script>--> 29 </head> 30 <body> 31 <div id="box"> 32 <div id="sbox"></div> 33 </div> 34 <script> 35 36 box.onmousedown=function (e) { 37 e=e||window.event; 38 var xDown = e.clientX,//获取鼠标的初始坐标 39 yDown = e.clientY,//获取鼠标的初始坐标 40 leftDown = this.offsetLeft, 41 topDown = this.offsetTop; 42 box.style.cursor = "pointer" 43 44 document.onmousemove=function (e) { 45 e = e||window.event; 46 var xMove = e.clientX, 47 yMove = e.clientY; 48 box.style.left = leftDown + xMove - xDown + "px"; 49 box.style.top =topDown + yMove - yDown + "px"; 50 51 } 52 }; 53 54 document.onmouseup=function () { 55 box.style.cursor = "default"; 56 document.body.style.cursor = "default"; 57 this.onmousemove=null; 58 } 59 60 sbox.onmousedown=function (e) { 61 e = e||window.event; 62 e.cancelBubble=true; 63 var xDown = e.clientX, 64 yDown = e.clientY, 65 boxW = box.clientWidth, 66 boxH = box.clientHeight; 67 document.body.style.cursor = "se-resize"; 68 document.onmousemove=function (e) { 69 e = e||window.event; 70 var xMove = e.clientX, 71 yMove = e.clientY, 72 x_ = xMove - xDown, //x变化量 73 y_ = yMove - yDown, // y变化量 74 width = Math.max(10,x_+boxW), 75 height = Math.max(10,y_+boxH); 76 box.style.width = width + "px"; 77 box.style.height = height + "px"; 78 } 79 } 80 81 </script> 82 </body> 83 </html>
2.键盘控制盒子运动
1 <!DOCTYPE html> 2 <html onselectstart='return false'> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Author" content="FengYu"> 6 <title>潭州教育</title> 7 <style> 8 *{margin:0;padding:0;font-family: Microsoft YaHei,serif;} 9 li{list-style: none;} 10 .box{ 11 position: absolute; 12 width:20px; 13 height: 20px; 14 background: pink; 15 } 16 </style> 17 <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 18 19 </head> 20 <body> 21 22 <script> 23 (function () { 24 for(var i=0;i<4;i++){ 25 var Div = document.createElement("div"); 26 Div.className = "box"; 27 Div.innerHTML = i+1; 28 Div.style.left = i*20 + "px"; 29 document.body.appendChild(Div); 30 } 31 //需要一个键盘事件 32 document.onkeydown=function (e) { 33 var aBox = document.getElementsByTagName("div"); 34 e= e || window.event; 35 36 switch (e.keyCode){ 37 case 37: 38 //左 39 aBox[0].style.top = aBox[aBox.length-1].offsetTop + "px"; 40 aBox[0].style.left = aBox[aBox.length-1].offsetLeft -20+ "px"; 41 break; 42 case 38: 43 //上 44 aBox[0].style.top = aBox[aBox.length-1].offsetTop -20+ "px"; 45 aBox[0].style.left = aBox[aBox.length-1].offsetLeft + "px"; 46 break; 47 case 39: 48 //右 49 aBox[0].style.top = aBox[aBox.length-1].offsetTop+ "px"; 50 aBox[0].style.left = aBox[aBox.length-1].offsetLeft +20+ "px"; 51 break; 52 case 40: 53 //下 54 aBox[0].style.top = aBox[aBox.length-1].offsetTop+20+ "px"; 55 aBox[0].style.left = aBox[aBox.length-1].offsetLeft+ "px"; 56 break; 57 } 58 document.body.appendChild(aBox[0]); 59 } 60 })() 61 62 </script> 63 </body> 64 </html>
