day11
1. 事件对象
（1）事件：对某个元素的某种操作
（2）事件对象：当某个事件触发时产生的对象，就是事件对象。
留神：event应用前提，必须有事件；也就是说没有事件，就没有事件对象；
不同的对象产生的事件不同。
事件对象的兼容： var e = evt || event;
事件的三要素:
- 元素（div）
- 事件类型 (onclick)
- [事件对象] (event)
<script type="text/javascript"> document.onclick = function(evt){ // 事件对象event 兼容写法 var e = evt || event; console.log(e); }</script>案例：小老虎跳一跳
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; border: 1px solid black; /* 要使元素挪动,须要增加定位 */ position: absolute; top: 500px; left:200px; background-image: url(img/3.jpg); background-size: 100px 100px; }/* img{ width: 100px; height: 100px; } */ </style> </head> <body> <div id="box"> <!--  --> </div> </body></html><script type="text/javascript"> // 要求: 点击大白板,使图片向上挪动200px,凌空2s,返回到原来地位 var oDiv = document.querySelector('#box'); document.onclick = function(){ // 留神:写应用oDiv.style.top 数值+单位 字符串 // 读应用oDiv.offsetTop 数值,无单位 oDiv.style.top = oDiv.offsetTop - 200 + 'px'; // 延时定时器 setTimeout(function(){ oDiv.style.top = 500 +'px'; },2000); }</script>2. 鼠标事件对象的属性
坐标属性：
- pageX/ pageY 鼠标绝对于整个文档左侧和顶部的坐标。 罕用
- clientX / clientY 鼠标绝对于部分窗口的左侧和顶部的坐标。
offsetX /offsetY 鼠标绝对于外部元素的间隔左侧和顶部的坐标。
- 鼠标间隔最近的父元素左顶点的坐标
- 罕用于拖拽
案例：图片追随鼠标挪动
3. 键盘事件
- 键盘事件对象都是通过document来触发的
键盘事件：
（1）keyUp: 用户开释某一个按键时产生
document.onkeydown = function(){ console.log('haha'); }（2）keyDown: 用户按下按键时产生
document.onkeyup = function(){ console.log('xixi'); }（3）keyPress: 用户按下按键，并且产生一个字符时产生（意思就是说按ctrl这样的按键没有成果的）
document.onkeypress = function(){ console.log('xixihaha'); }
键盘对象
（1）keyCode:键盘录入时字母所对应ASCII码
- A:65
a:970:48
回车:13
ctrl+回车:10
- A:65
- (2) ctrlKey 返回当事件被触发时，"Ctrl" 是否被按下,返回值为true or false
//键盘检测兼容写办法var key = e.keyCode || e.which || e.charCode;
<script type="text/javascript"> document.onkeypress = function(evt){ var e = evt || event; var key = e.keyCode || e.charCode || e.which; console.log(key); console.log(e.ctrlKey); if(e.keyCode==10 && e.ctrlKey){ console.log('发送'); } }</script>4. 事件流
（1）概念：
- 当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发 称为事件流
（2）事件流的两种模式：
事件冒泡
- 从子元素向父元素触发 --->当某个事件触发时，同样的事件会向父元素触发。
- 留神：但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题。
事件的冒泡：
文档构造： window document.body body元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 200px; height: 200px; border: 1px solid red; } #son{ width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div id="father"> <div id="son"> </div> </div> </body></html><script type="text/javascript"> var oF = document.getElementById('father'); var oS = document.getElementById('son'); oS.onclick = function(){ console.log('oS'); } oF.onclick = function(){ console.log('oF'); } document.body.onclick= function(){ console.log('o-body'); } document.onclick = function(){ console.log('o-document'); } window.onclick = function(){ console.log('o-window'); }</script>阻止事件冒泡
//兼容写法e.stopPropagation?e.stopPropagation():e.cancelBubble='true';<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ display: none; } </style> </head> <body> <button type="button">显示</button> <ul> <li>抓鸭子</li> <li>抓几只</li> <li>抓1万只</li> <li>抓到了</li> <li>嘎嘎嘎嘎嘎</li> </ul> </body></html><script type="text/javascript"> var oUl = document.querySelector('ul'); var oBtn = document.querySelector('button'); oBtn.onclick = function(evt){ var e = evt || event; oUl.style.display = 'block'; //测试该办法是否存在,若不存在,返回undefined console.log(e.stopPropagation); console.log('点击按钮'); // 三目运算: // 依据表达式1的虚实,来决定是执行表达式2还是表达式2 // 如果表达式1为真,则执行表达式2,最终返回表达式2的后果 // 如果表达式2为假,则执行表达式3,最终返回表达式3的后果 // 阻止冒泡事件 兼容写法 e.stopPropagation?e.stopPropagation():e.cancelBubble='true'; } document.onclick = function(){ oUl.style.display= 'none'; console.log('点击大白板'); }</script>阻止事件的默认行为
//兼容写法e.preventDefault?e.preventDefault():e.returnValue = false;//或者简化的兼容写法return false;- 阻止鼠标右键
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标右键事件</title> <style type="text/css"> #box{ height: 100px; width: 100px; background-color: hotpink; position: absolute; } </style> </head> <body> <div id="box"> </div> </body></html><script type="text/javascript"> var oBox = document.querySelector('#box'); document.oncontextmenu = function(evt){ // console.log('haha'); var e = evt||event; oBox.style.left = e.pageX + 'px'; oBox.style.top = e.pageY + 'px'; // 阻止浏览器默认行为 // e.preventDefault();//非ie // 兼容写法 // e.preventDefault?e.preventDefault():e.returnValue=false; // 简化写法 return false; }</script>阻止超链接
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com">跳转</a> </body></html><script type="text/javascript"> var oA = document.querySelector('a'); oA.onclick = function(evt){ var e = evt||event; e.preventDefault?e.preventDefault():e.returnValue=false; // return false; }</script>
事件捕捉
- 从父元素向子元素触发