HTML 14 JS事件

2018/10/18 15:05
阅读数 0

一 :什么是事件

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

二:学习的目的

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

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

  学习要点: 

  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>
键盘事件

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部