一.事件机制
2.事件绑定
6）addEventListener的第三个参数
false:冒泡;
true:捕获;
IE的attachEvent没有第三个参数，所以就不说了
冒泡:从最内层标签开始执行事件，逐层向外，直到执行到document的事件
捕获:一个事件从document开始执行，逐层向内层标签执行，最后执行事件触发的标签
注意:必须是相同的事件;
案例:(01.冒泡.html);
结构
<body>
<div id="box">
<p>我是</p>
</div>
<body>
js:点击段落，依次弹出提示框如下:
(我是p的绑定事件)
(我是div的绑定事件)
(我是body的绑定事件)
(我是document的点击事件)
案例:(02.捕获.html)
结构
<body>
<div id="box">
<p>我是</p>
</div>
<body>
js:点击段落，依次弹出提示框如下:
(我是document的点击事件)
(我是body的绑定事件)
(我是div的绑定事件)
(我是p的绑定事件)
7）阻止冒泡
标准浏览器阻止冒泡
事件对象.stopPropagaton();
Propagaton:传送、传播
事件对象：当出发时间是会自动创建一个事件对象，通过实践对象可以访问很多信息，比如获取事件源、鼠标/页面的坐标等等。
如：
p.addEventListener('click',function(event)){
},false;
参数event就是事件对象
IE低版本浏览器阻止冒泡
获取事件对象
var e =window.event;
e.cancelBubble = true;
封装阻止冒泡的兼容函数
function stopBubble(evt){
//evt被识别就是标准浏览器，就会返回evt给event变量，如果evt不能识别就是IE低版本浏览器，就会吧window.event给event变量
var event = evt || window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
p.addEventListener('click',
function(event){
alert('我是p的绑定事件');
stopBubble(event);
},false);
案例:(03.阻止冒泡.html)
阻止01案例的冒泡行为
1）只实现标准浏览器的
2）只实现低版本的
3）实现浏览器兼容的。
二.事件对象event
任何事件在触发的时候，在事件处理函数中会自动生成一个事件对象event，这个event对象包含了所有与事件相关的信息，
比如:事件源是谁，事件是什么，鼠标的位置，键盘按键是谁等等信息。
event事件对象的获取：
1.标准浏览器:它是事件处理函数中的形式参数(名称不定)，例如：e
2.IE低版本浏览器:window的一个event属性，格式固定，window.event。
div.onclick = function(evt){
// 兼容
var event = evt ||window.event;
console.log(event);
}
案例:(04.事件对象.html)
单击body，在控制台输出事件对象
1）标准浏览器输出
2）IE低版本浏览器输出
单击document，再控制台输出事件对象
3)兼容的写法
使用event对象获取事件源
event.target || event.srcElement
IE下，event对象有srcElement属性，但是没有target属性FireFox下，event对象有target属性，但是没有srcElement属性
Chrome下，event对象有target属性，也有srcElement属性。这两个都能得到事件源。
案例:(05.event对象获取事件源.html)
结构:
<div id="box">点击</div>
<input type="button" value="btn" id="btn">
js:
1)单击div，控制台输出事件对象及三个事件源对象
2）单击按键，控制台输出事件对象及四个事件源对象
要求:事情对象及事件源的获取需要实现浏览器兼容性
使用event阻止浏览器的默认行为
超链接，在单击的时候，打开新页面是默认事件
表单，有提交数据到服务器的默认事件
有时候，我们需要阻止默认事件
1.DOM0
在事件处理函数的最后或者当满足一定条件的时候，加return false了;就会阻止默认事件
2标准浏览器
通过实践对象的preventDefault()
方式阻止默认事件
事件对象.preventDefault();
3.IE低版本浏览器
通过设置事件对象returnValue属性值来阻止默认事件
事件对象.returnValue = false;
兼容写法：
封装阻止默认事件的兼容函数
function prevent(evt){
var event = evt || window.event;
if(event.preventDefault){//标准浏览器
event.preventDefault();
}else if(event.returnValue){//IE低版本
event.returnValue = false;
}else{//以上浏览器皆不是
return false;
}
}
案例:(06.阻止默认事件.html)
结构:
超链接
输入框 提交按钮
js：
1)阻止超链接、表单提交、右键的默认事件
2）实现浏览器的兼容