事件相关内容

通过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>

View Code

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>

View Code

秒客网

事件相关内容

相关文章