HTML 14 JS事件

一：什么是事件

　　发生的某一件事；触发特定的条件，完成某一项功能

二：学习的目的

　　在特定的条件下，完成特定的功能

　　条件满足的情况下，系统会自动执行 ( 回调 ) 绑定的方法

　　学习要点：　

　　1、事件的两种绑定方式 ***
　　2、事件event *****
　　3、冒泡和默认事件 *****
　　4、鼠标事件 *****
　　5、键盘事件 ***
　　6、表单事件 ***
　　7、文档事件 *
　　8、图片事件 *
　　9、页面滚动事件 *****

三：

　　事件的两种绑定方式：

　　// on // 非on

　　1、on事件绑定

　　　　当有两个 div 只打印 " 点击2 " ，原因,只能绑定最后一个方法

　　　　解绑的方法：
　　　　div.onclick = null;

　　2、非on事件的绑定

　　　　存在重复绑定

　　　　事件解绑的方法：
　　　　div.removeEventListener('click', fn) // 注:绑定与移除需要指向同一个方法(地址)

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件的两种绑定方式</title>
 6 </head>
 7 <body>
 8     <div class="div">12345</div>
 9 </body>
10 <script type="text/javascript">
11     var div = document.querySelector('.div');
12     // on事件
13     div.onclick = function () {
14         console.log("点击1");
15     }
16     div.onclick = function () {
17         console.log("点击2");
18     }
19     // 只打印"点击2",原因,只能绑定最后一个方法
20 
21     // 事件的移除
22     div.onclick = null;
23 
24 
25     // 非on事件的绑定 *
26     // addEventListener('事件名', 回调函数, 冒泡方式)
27     div.addEventListener('click', function() {
28         console.log("点击1");
29     });
30 
31     var fn = function() {
32         console.log("点击2");
33     }
34     div.addEventListener('click', fn);
35     // 存在重复绑定
36 
37     // 事件的移除
38     // removeEventListener('事件名', 回调函数名)
39     div.removeEventListener('click', fn)
40     // 注:绑定与移除需要指向同一个方法(地址)
41 
42 </script>
43 </html>

事件的两种绑定方式

　　冒泡和默认事件：

　　　冒泡：父子级拥有同一的事件，在子级区域触发子级事件，父级也能捕获并响应

　　　　点击传过来的是：MouseEvent，存储着鼠标触发事件的一系列信息

　　　默认：默认事件: 取消默认的事件动作，如鼠标右键菜单

　　　　父级取消了默认事件，子级都被取消掉了

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>冒泡和默认事件</title>
 6     <style type="text/css">
 7         .sub {
 8             width: 100px;
 9             height: 100px;
10             background-color: red;
11             position: absolute;
12             left: 50px;
13             top: 50px;
14         }
15         .sup {
16             width: 200px;
17             height: 200px;
18             background-color: orange;
19             position: relative;
20             /*position: absolute;
21             top: 50px;
22             left: 100px;*/
23             margin: 50px auto;
24         }
25         body {
26             border: 1px solid black;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="sup">
32         <div class="sub"></div>
33     </div>
34 </body>
35 <script type="text/javascript">
36     var sub = document.querySelector('.sub');
37     var sup = document.querySelector('.sup');
38     var body = document.querySelector('body');
39 
40     // 冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
41     sub.onclick = function (ev) {
42         ev.stopPropagation();
43         console.log("sub click");
44     }
45     sup.onclick = function (ev) {
46         ev.cancelBubble = true;
47         console.log("sup click");
48     }
49     body.onclick = function (ev) {
50         // 事件的兼容
51         // ev = ev | event;
52 
53         // 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
54         console.log(ev);
55         console.log("body click");
56     }
57 
58 
59     // 默认事件: 鼠标右键 oncontextmenu
60     sub.oncontextmenu = function (ev) {
61         // ev.preventDefault();
62         console.log("sub menu click");
63     }
64 
65     // 父级取消了默认事件,子级都被取消掉了
66     body.oncontextmenu = function (ev) {
67         console.log("body menu click");
68         return false;
69     }
70 
71 </script>
72 </html>

冒泡和默认事件

　　鼠标事件

　　学习要点：事件参数 event （存放事件信息的回调参数）

　　　onclick：鼠标点击

　　　ondblclick：鼠标双击

　　　onmousedown：鼠标按下

　　　onmousemove：鼠标移动

　　　onmouseup：鼠标抬起

　　　onmouseenter（or）onmouseover：鼠标悬浮

　　　onmouseout （or）onmouseleave：鼠标移开

　　　oncontextmenu：鼠标右键

注：有些事件会相互冲突，可以一个一个来试验

　鼠标事件ev反馈的鼠标点

　　1 移动： ev.clientX | ev.clientY 相对于页面原点（左上角）

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>鼠标事件</title>
 6     <style type="text/css">
 7         .div {
 8             width: 200px;
 9             height: 200px;
10             background-color: orange;
11             margin: 50px auto;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="div"></div>
17 </body>
18 <script type="text/javascript">
19     var div = document.querySelector('.div');
20 
21     // 单击
22     div.onlick = function () {
23         console.log("双击了");
24     }
25 
26     // 双击
27     div.ondblclick = function () {
28         console.log("双击了");
29     }
30 
31     // 鼠标按下
32     div.onmousedown = function () {
33         console.log("按下");
34     }
35 
36     // 鼠标移动
37     div.onmousemove = function (ev) {
38         // 鼠标在页面中的位置
39         console.log("x的坐标:", ev.clientX);
40         console.log("y的坐标:", ev.clientY);
41         console.log("移动");
42     }
43 
44     // 鼠标抬起
45     div.onmouseup = function () {
46         console.log("抬起");
47     }
48     
49     //悬浮
50     div.onmosueover = function () {
51         console.log("悬浮");
52     }
53 
54     //移开
55     div.onmouseout = function () {
56         console.log("移开");
57     }
58 
59     //右键
60     div.oncontextmenu = function () {
61         console.log("右键");
62     }
63 
64 
65 </script>
66 </html>

鼠标事件

　　键盘事件

　　　onkeydown：键盘按下

　　　onkeyup：键盘抬起

　　1）事件参数ev

　　　1 ev.keyCode：按键编号 // 37(左) 38(上) 39(右) 40(下)　

　　　2 ev.altkey：alt特殊按键 // 18

　　　3 ev.ctrlkey：ctrl特殊按键 // 17

　　　4 ev.shiftkey：shift特殊按键 // 16

　　 // 自定义按键（比如说ctrl + c 和 ctrl + v 复制粘贴等）：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>键盘事件</title>
 6     <style type="text/css">
 7         .div {
 8             width: 200px;
 9             height: 200px;
10             background-color: yellow;
11             /*margin: 50px auto;*/
12             /*定位来做键盘移动方式*/
13             position: absolute;
14             top: 0;
15             left: 100px;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="div"></div>
21 </body>
22 <script type="text/javascript">
23     var div = document.querySelector('.div');
24     // 操作一般标签，键盘事件绑定给文档 document
25     // 表单标签（可以录入文本），键盘事件绑定给表单标签
26     document.onkeydown = function(ev) {
27         // 当在页面点击方向或特殊按键时会在控制台显示对应的数字
28         // console.log(ev.keyCode);
29         //移动
30         switch(ev.keyCode) {
31             // offsetLeft 盒模型 结合绝对定位来使用 获取之前的距左距离
32             case 37: 
33                 console.log("左");
34                 div.style.left = div.offsetLeft - 3 + "px";
35                 break;
36             case 38: 
37                 console.log("上");
38                 div.style.top = div.offsetTop - 3 + "px";
39                 break;
40             case 39: 
41                 console.log("右");
42                 div.style.left = div.offsetLeft + 3 + "px";
43                 break;
44             case 40: 
45                 console.log("下");
46                 div.style.top = div.offsetTop + 3 + "px";
47             break;
48         }
49     }
50 </script>
51 </html>

键盘事件