106.解除事件处理程序：若绑定匿名函数则无法解除
1.ele.onclick = false/‘’/null;
例1：只执行一次就失效
div.onclick = function(){
console.log(this);
this.onclick = null;
}
2.ele.removeEventListener(type, fn, false);
如果想让一个函数还能被清除，只有把函数写在外面留一个引用别人能找到它
例1：利用test清除
div.addEventListener('click',test,false);
div.removeEventListener('click',test,false);
function test(){
console.log('a');
}
3.ele.detachEvent(‘on’ + type, fn);（同上的2一样）
107.事件处理模型（事件冒泡，事件捕获）
一个对象的一个事件类型，只能遵循一种事件模型（要么冒泡，要么捕获）
1.事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一个时间，字子元素冒泡向父元素，代码上自底向上
解释就是如果点击子元素，它会一级一级的传递到父元素上。
我们把第一种事件处理方式叫做第一种事件处理模型：事件冒泡模型（常规模型）
例1：虽然视觉上不是嵌套关系，但是结构上依旧是，点击蓝色的box区域依旧都显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
.wrapper{
height:300px;
width:300px;
background-color:red;
}
.content{
height:200px;
width:200px;
background-color:pink;
margin-left:300px;
}
.box{
height:100px;
width:100px;
background-color:aqua;
margin-left:200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box">
</div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapper');
},false);
content.addEventListener('click',function(){
console.log('content');
},false);
box.addEventListener('click',function(){
console.log('box');
},false);
/*事件处理模型，就是整个系统或者元素针对这个事件的处理方式*/
</script>
</body>
</html>
2.事件捕获
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
例1：点击蓝的执行顺序，wrapper，content，box，红的捕获后执行，粉的捕获后执行，蓝的就是执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
.wrapper{
height:300px;
width:300px;
background-color:red;
}
.content{
height:200px;
width:200px;
background-color:pink;
margin-left:300px;
}
.box{
height:100px;
width:100px;
background-color:aqua;
margin-left:200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box">
</div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapper');
},true);
content.addEventListener('click',function(){
console.log('content');
},true);
box.addEventListener('click',function(){
console.log('box');
},true);
/*事件处理模型，就是整个系统或者元素针对这个事件的处理方式*/
</script>
</body>
</html>
3.IE没有捕获事件
4.触发事件：先捕获后冒泡
例1：先捕获后冒泡，所以点击蓝色区域时前后四个显示的顺序是正确的，但是蓝的区域自己，点击时候只是执行，没有别的，所以先绑定什么事件，就先执行什么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type="text/css">
.wrapper{
height:300px;
width:300px;
background-color:red;
}
.content{
height:200px;
width:200px;
background-color:pink;
margin-left:300px;
}
.box{
height:100px;
width:100px;
background-color:aqua;
margin-left:200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box">
</div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapperBubble');
},false);
content.addEventListener('click',function(){
console.log('contentBubble');
},false);
box.addEventListener('click',function(){
console.log('boxBubble');
},false);
wrapper.addEventListener('click',function(){
console.log('wrapper');
},true);
content.addEventListener('click',function(){
console.log('content');
},true);
box.addEventListener('click',function(){
console.log('box');
},true);
/*事件处理模型，就是整个系统或者元素针对这个事件的处理方式*/
</script>
</body>
</html>
5.focus，blur，change，submit，reset，select 等事件不冒泡
108.取消冒泡和阻止默认事件
1.取消冒泡：
（1）W3C标准 event.stopPropagation();但不支持ie9以下版本
（2）IE独有 event.cancelBubble = true;
例1：下例就出现了不需要的冒泡现象，点击div部分不止颜色也改变了，控制也显示字
var div = document.getElementsByTagName('div')[0];
document.onclick = function(){
console.log('你闲的啊');
}
div.onclick = function(){
this.style.backgroundColor = 'pink';
}
更改：取消冒泡两种方法这两种方法哪个都行
div.onclick = function(e){
/*e.stopPropagation();*/
e.cancelBubble = true;
this.style.backgroundColor = 'pink';
}
（3） 封装取消冒泡的函数 stopBubble(event)
div.onclick = function(e){
stopBubble(e);
this.style.backgroundColor = 'pink';
}
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
2.阻止默认事件
默认事件有 — 表单提交，a标签跳转，右键菜单等
（ 1）return false; 以对象属性的方式注册的事件才生效，它是一个句柄的方式来绑定默认事件，只有用句柄方式绑定事件（onclick之类的），return false才好使
例1：右键出菜单事件
document.oncontextmenu = function(){}
例2：点击右键控制台显示a
document.oncontextmenu = function(){
console.log('a');
}
例3：点击右键只显示a，不显示菜单了
document.oncontextmenu = function(){
console.log('a');
return false;
}
（2）event.preventDefault(); W3C标注，IE9以下不兼容
例1：
document.oncontextmenu = function(e){
console.log('a');
e.preventDefault();
}
（3）event.returnValue = false;
（4）兼容IE 封装阻止默认事件的函数 cancelHandler(event);
document.oncontextmenu = function(e){
console.log('a');
cancelHander(e);
}
function cancelHander(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
fn() -->return false 不可能的，函数执行达不到return false得结果，所以不写
例1:去掉a标签点击返回页首的默认事件
var a = document.getElementsByTagName('a')[0];
a.onclick = function(){
return false;
}
例2:<a href="javascript:alert('a')">baidu</a> 直接将js代码写入标签中，
例3：取消a的功能，点不好使
<a href="javascript:void(false)">baidu</a> （在行间写void相当于写返回值，return什么东西）
109.事件对象
1.event || window.event 用于IE：如果想拿到一个事件触发之后的事件对象，因为IE浏览器事件在window.event中，而不是e，因为有兼容性的问题，所以要这么写
2.事件源对象:（事件对象上的属性）可以用在事件委托
（1）event.target 火狐独有的
（2）event.srcElement Ie独有的
（3）这俩chrome都有
例1：当点击红色区域式事件源是自己，当点击粉色区域时事件源是box
<body>
<div class="wrapper"style="width:100px;height:100px;background-color:red">
<div class="box" style="width:50px;height:50px;background-color:pink"></div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName('wrapper')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.onclick = function(e){
var event = e || window.event;
console.log(event);
}
</script>
</body>
例2：输出li中的内容，要是有几亿个呢，所以利用事件源对象，在ul上绑定，好添加，灵活，
li几乎覆盖了ul所有区域，点击第一个li，ul一定会执行，执行之后找的是事件源对象还是li，比在li上添加更好一点
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
//部分代码省略
3.兼容性写法
110.事件委托：利用事件冒泡，和事件源对象进行处理（像上一道题，绑定在li他爹身上，而不是li身上灵活）
优点：
1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件
作业：onmouseenter onmouseleave onmousemove 完成小方块的拖拽，下面这个例子不是完整的，很粗糙，要自己优化一下，这个绑定方式绝对不可以.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lottery</title>
</head>
<body>
<div style="height:200px;width:200px;background-color:red;position:absolute;left:0;top:0">
<!--<div class="box" style="height:100px;width:100px;background-color:pink"></div>-->
</div>
<script type="text/javascript">
var div= document.getElementsByTagName('div')[0];
var disX;
var disY;
div.onmousedown = function(e){
disX = e.pageX - parseInt(div.style.left);
disY = e.pageY - parseInt(div.style.top);
document.onmousemove = function(e){
var event = e || window.event;
div.style.left = event.pageX -disX + "px";
div.style.top = event.pageY -disY+ "px";
}
document.onmouseup = function(){
div.onmousemove = null;
}
}
</script>
</body>
</html>
//这个onmousemove 绑在的是document上，也就是在整个页面上移动，这个函数都会执行，鼠标到哪小方块在哪
//这个onmousemove 绑在的要是div上，鼠标就只是在小方块上移动，这个函数才会执行，鼠标的挪动是受屏幕的侦屏系统监控的，就是每一秒鼠标可以挪动100下，
但是每一秒我们对事件的监听达不到100次。就是10秒监听一次你什么时候挪，可能你在1秒的时候就跑出去了，它没监听到，所以就是鼠标可能突然跑出去了，但是小方块没移动
