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: 350px;
height: 350px;
margin: 30px 20px;
position: relative;
background: url("images/iPhone.jpg") no-repeat;
box-shadow: 3px 3px 3px #000;
}
.box .innerBox{
display: none;
width: 175px;
height: 175px;
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
filter: alpha(opacity=50);
background: #cccccc;
cursor: move;
}
.bigImageBox{
position: absolute;
left: 400px;
top: 30px;
display: none;
width: 350px;
height: 350px;
box-shadow: 3px 3px 3px #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';
}
