一 ：什么是事件
发生的某一件事；触发特定的条件，完成某一项功能
二：学习的目的
在特定的条件下，完成特定的功能
条件满足的情况下，系统会自动执行 ( 回调 ) 绑定的方法
学习要点：
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>