js 事件对象Event与放大镜效果

Event对象

一、Event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用

二、获取event对象
在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。

// js
<script type="text/javascript">
document.onmousemove=function (event) {  //event：形参
            var event=event||window.event;
             //第一个event是指变量event；
             //event||window.event， 其中这2个event是指形参event；
 }
 </script> 

Event属性和方法：

1. type：事件的类型，如onlick中的click；

2. srcElement/target：事件源，就是发生事件的元素；

3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）

4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上
   document.body.scrollLeft和 document.body.scrollTop)。

5. pageX,pageY：以文档为基准点，类似绝对定位；

6. screenX、screenY：以电脑屏幕为基准点；

放大镜案例：

1.布局上，显示的小图的盒子，和最开始隐藏的大图的盒子必须在一个盒子里；同一个父亲；且父相子绝；（方便利用小图上面的小方块来获取小方块在小图所在盒子的位置，同时获得大图片在大图盒子的位置）

2.难点是鼠标在小图的盒子里移动的时候，大图对应大图盒子的位置；

html部分

// html
 <div class="fdj" id="fdj">
        <div class="small" id="small">
            <div class="mask" id="mask"></div>
            <img src="images/001.jpg" id="img" alt="">
        </div>
        <div class="big" id="big">
            <img src="images/0001.jpg" alt="">
        </div>
    </div>

css部分

// css
 <style>
        *{margin: 0;padding: 0;}
        #fdj{
            width: 350px;
            height: 350px;
            position: relative;
            top:0;left: 0;
            border: 1px solid #eee;
            margin-left: 100px;
            margin-top: 100px;
        }
        #small{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }
        #small #mask{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: rgba(255,255,0,.35);
            z-index: 2;
        }
       #small img{
            position: absolute;
            top: 0;
            left: 0;
        }
        #big{
            display: none;
            position: absolute;
            top: 0;
            right: -460px;
            width: 450px;
            height: 450px;
            overflow: hidden;
            border: 1px solid #eee;
        }
        #big img{
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

js部分

// js
<script type="text/javascript">
        var small=document.getElementById("small");
        var big=document.getElementById("big");
        var mask=document.getElementById("mask");
        var l=0,t=0;
        small.onmouseover=function () {
            mask.style.display="block";
            big.style.display="block";
        }
        small.onmouseout=function () {
            mask.style.display="none";
            big.style.display="none";
        }
        small.onmousemove=function (event) {
            var event=event||window.event;
            l=event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;
            t=event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
            if(l<0){l=0;}else if(l>small.offsetWidth-mask.offsetWidth){l=small.offsetWidth-mask.offsetWidth;}
            if(t<0){t=0;}else if(t>small.offsetHeight-mask.offsetHeight){t=small.offsetHeight-mask.offsetHeight;}
            mask.style.left=l+"px";
            mask.style.top=t+"px";
big.children[0].style.left=-l*big.offsetWidth/small.offsetWidth+"px";
big.children[0].style.top=-t*big.offsetHeight/big.offsetHeight+"px";
        }
    </script>