js 事件

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）鼠标经过商品产生的放大镜效果

<!-- HTML部分 -->

< 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';

}