1、事件对象
给一个元素绑定一个点击事件，然后触发这个事件，打印函数中的 argument[0] ，结果就是一个MouseEvent对象，我们把它叫做事件对象。
兼容问题：
标准浏览器下：用 e 或者 argument[0]
IE浏览器下：用 window.event
2、事件对象中的内容
e.clientX：鼠标点击位置距离浏览器左上角的横轴坐标
e.clientY：鼠标点击位置距离浏览器左上角的纵轴坐标
e.pageX：鼠标点击位置距离页面/body左上角的横轴坐标
e.pageY：鼠标点击位置距离页面/body左上角的纵轴坐标
ps：这两个属性在IE中是不存在的
e.type：事件类型。如：点击事件就是 'click'
e.preventDefault()：阻止默认行为
e.returnValue = false; IE6-8中阻止默认行为
ps：return false; => 兼容所有的浏览器
e.target：事件源。表示真正触发事件的那个元素
window.event.srcElement： IE6-8中的事件源。
ps：兼容处理 => e.target = e.target || window.event.srcElement
e.stopPropagation()：阻止事件传播
e.cancelBubble = true; 在IE6-8中阻止事件冒泡传播
ps：兼容处理 => e.stopProgation = e.stopProgation || function () { e.cancelBubble = true; }
3、事件传播机制 冒泡和捕获
事件的执行顺序：先捕获 => 到达目标 => 冒泡
（1）DOM 0 级事件只能给一个事件绑定一个函数，只能冒泡。例：
ele.
onclick
=
function(){
console.
log(
1);
};
（2）而 DOM 2 级事件可以给一个事件绑定多个函数，可以规定函数在捕获阶段触发还是冒泡阶段触发。
利用 addEventListener 绑定事件，参数如下：
addEventListener( '事件类型' , 绑定的函数 , true/false )
其中true表示在捕获阶段发生，false表示在冒泡阶段发生
function
middleFn(){
console.
log(
'middle');
}
function
outerFn(){
console.
log(
'outer');
}
function
innerFn(){
console.
log(
'inner');
}
inner.
addEventListener(
'click',innerFn,
false);
middle.
addEventListener(
'click',middleFn,
false);
outer.
addEventListener(
'click',outerFn,
false);
4、实例
（1）鼠标经过商品产生的放大镜效果
<
div
class=
"box">
<
div
class=
"innerBox">div>
div>
<
div
class=
"bigImageBox">
<
img
src=
"images/bigIphone.jpg"
alt=
""/>
div>
/* css部分 */
.box{
width:
350
px;
height:
350
px;
margin:
30
px
20
px;
position:
relative;
background:
url(
"images/iPhone.jpg")
no-repeat;
box-shadow:
3
px
3
px
3
px
#000;
}
.box
.innerBox{
display:
none;
width:
175
px;
height:
175
px;
position:
absolute;
left:
0;
top:
0;
opacity:
0.5;
filter:
alpha(opacity=
50);
background:
#cccccc;
cursor:
move;
}
.bigImageBox{
position:
absolute;
left:
400
px;
top:
30
px;
display
:
none
;
width:
350
px;
height:
350
px;
box-shadow:
3
px
3
px
3
px
#000;
overflow:
hidden;
}
.bigImageBox
img{
position:
absolute;
left:
0;
top:
0;
width:
200
%;
height:
200
%;
border:
none;
vertical-align:
top;
}
// JS部分
var box
= document.
getElementsByClassName(
'box')[
0];
var innerBox
= box.
getElementsByClassName(
'innerBox')[
0];
var bigImgBox
= document.
getElementsByClassName(
'bigImgBox')[
0];
var bigImg
= bigImgBox.
getElementsByTagName(
'img')[
0];
//给最外层的box绑定onmousemove事件，当事件被触发的时候，让里面的半透明盒子跟随鼠标移动
box.
onmouseover
=
function (){
//鼠标悬停在box上面的时候让innerBox显示
innerBox.style.display
=
'block';
bigImgBox.style.display
=
'block';
};
box.
onmousemove
=
function (
e){
//让透明盒子跟随鼠标动起来
//其实就是让透明盒子的left和top的值随着鼠标move变化
e
= e
|| window.event;
e.pageX
=
e.pageX
|| e.clientX
+ (document.documentElement.scrollLeft
|| document.body.scrollLeft);
e.pageY
= e.pageY
|| e.clientY
+ (document.documentElement.scrollTop
|| document.body.scrollTop);
//开始实现计算透明盒子的left和top
// offsetWidth = width + border + padding
var l
= e.pageX
- box.offsetLeft
- innerBox.offsetWidth
/
2;
var t
= e.pageY
- box.offsetTop
- innerBox.offsetHeight
/
2;
// 计算透明盒子的 margin-left 和 margin-top
var maxLeft
= box.offsetWidth
- innerBox.offsetWidth;
var maxTop
= box.offsetHeight
- innerBox.offsetHeight;
l
= l
<
0
?
0
: l
> maxLeft
? maxLeft
: l;
t
= t
<
0
?
0
: t
> maxTop
? maxTop
: t;
innerBox.style.left
= l
+
'px';
innerBox.style.top
= t
+
'px';
//下面的代码负责右侧大图跟随左侧的透明innerBox移动
bigImg.style.left
=
-
2
* l
+
'px';
//2倍关系就是左侧innerBox和box的关系
bigImg.style.top
=
-
2
* t
+
'px';
};
box.
onmouseout
=
function (
e){
//半透明盒子消失
console.
log(e.type);
innerBox.style.display
=
'none';
bigImgBox.style.display
=
'none';
}
