DOM高级
1元素注册事件两种方式。
2 删除事件两种方式。
3 DOM事件流3个阶段。 事件对象，阻止事件冒泡。
4 事件委托。
5 常用鼠标和键盘事件。
1 注册事件概述：
传统方式和方法监听方式。
1.传统注册方式：以on开头的时间。
btn.onclick=function(){} 注册事件的唯一性。后面的事件处理函数 会将前面覆盖调。所以需要有新的方法。
2.监听注册方式：
addEventListener()是一个方法。（使用的更多。）同一个事件添加多个事件处理程序。
IE9不支持方法，可使用attachEvent()代替。
按照顺序执行。
addEventListener（type，listener，[flase,true])
type:click,mouseover:带引号！这里面不需要带on,
listenr：事件处理函数，事件发生时，会调用监听改事件。监听器！
bts[1].addEventListener('click',function(){})
IE9之前：attachEvent事件；该特性非标准，不在生产环境中使用。
eventTarget.attachEvent(eventName,callBack())
删除事件，解绑事件：！
1.传统注册方式 ：eventTarget.onclick= null; divs[0].onclick =null;
2.方法监听注册方式：
eventTarget.removeEventListener(type,listenr{,false,true})
divs[1].removeEventListener('click',不能用匿名函数
divs[1].addEventLister('click',fn)
divs[1].removeEventListener('click',fn);
function fn(){ alert(22); }
3 divs[2].attachEvent('onclick',fn1)
function fn1{alert(33)}
divs[2].detachEvent('onclick',fn1)
DOM事件流；事件发生时候，元素节点之间按照特定的顺序传播，
事件传播的过程就是事件流。
Document HTml body div
1 捕获阶段： 中国 山东 蓝翔。
2 当前目标阶段。
3 冒泡阶段。
事件冒泡：IE最早提出，
事件捕获：网景最早提出，DOM，
最后W3C ，综合两个阶段。
注意：
1 JS代码只能执行捕获或者冒泡的其中一个阶段！！！！！不能同时弄两个。
2 onclick和attachEvent（ie）只能得到冒泡阶段。
3 addEventListen（'',function,true）;true是捕获阶段。默认或者false则是捕获阶段。
4 但是在我们的实际开发过程中，我们很少使用事件捕获，更关注事件冒泡。
5 有些事件是没有冒泡的，比如：onblur，onfocus,onmousenter,onmouseleave
6 有时候事件冒泡会带来麻烦，有时候会有帮助，
事件对象。
div =document.querySelector('div')
div.onclick =function (event){ console.log(event)}
1 event就是一个事件对象，写到我们侦听函数的小括号，当做形参
2 事件对象只有有了事件才会存在。这是系统给我们创建的，不需要我们传递实参。
3 事件对象，是我们事件一系列数据的结合，和事件相关的，比如鼠标点击就包含鼠标的信息，
鼠标坐标，键盘事件，比如按下了那个键。
div.addEventListener('click',function(event){e})
4 event,evt,e都可以！
5 事件对象也有兼容性问题 ie678 是window.event
兼容性的写法。 e= e || window.event;
常见的事件对象，
返回事件类型。
阻止 事件默认行为，让链接不跳转，或者提交按钮不提交。
e.preventDefault()//DOM 标准写法。
e.returnValue ； ie678属性
return false();//阻止，也能默认阻止，return后面是不执行的。
阻止冒泡的两种方式：
stopPropagation //stop 停止 propagation的传播
e.cancelBublle= true;//非标准cancle取消bubble泡泡
if (e&& e.stopPropagetion){ e.stopPropagation}
else { windows.event.cancelBublle =true}
事件冒泡的坏处。需要阻止事件冒泡。
事件冒泡的好处。事件委托。
100个快递，
ul li里面 每个事件，进行点击事件，dom访问次数就很多，就会延长交换事时间。
事件委托，也称为，事件代理，在jQuery里面成为事件委派。
事件委托的原理：不是子节点监听，而是父节点监听，利用冒泡原理影响每个子节点。
ul注册，target找到li，点击的是li，事件冒泡到ul上，ul有注册事件，会触发监听器。
事件委托的作用：
只操作了一次DOM，提高了程序的特性。
e.target.style.backgroundColor='pink'
7.1 鼠标事件：
鼠标经过： on mouseover， 鼠标离开：onmouse out
鼠标左键触发： onclick
鼠标失去焦点。onblur，鼠标获得焦点onfocus
1.禁止鼠标右键：
contextmenu：e.preventDefault() 取消默认的上下文菜单。不能右键删除。
selectstart ：e.preventDefault();禁止选中
7.2鼠标事件对象。
event
e.clientX,
e.clientY:相对于浏览器窗口的XY
e.pageX 返回鼠标对于文档页面的X坐标，（用的最多）
e.pageY, 返回鼠标Y坐标
e.screenX
e.screeY 鼠标相对于电脑的屏幕Y
常用键盘事件。
onkeyup
onkeydown
onkepress 区分字母大小写。
键盘事件对象。
keyCode