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


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

你可能感兴趣的:(js,js,事件)