2015.09.23

标签：

Javascript之事件流

1.事件冒泡+事件捕获+DOM事件流

引子：
<div id="1" conclick...> | e3.onclick=function(){
<div id="2" onclick...> | console.log(this.id);
<div id="3" onclick....> | } 得到3 2 1；
</div> | 点击里面的事件，在它外层的事件会执行个遍，
</div> | ：事件冒泡。。
</div> |

----------
DOM中使用addEventListener（）和removeEventListener（）方法完成事件处理程序（监听程序）的指派和删除的任务；这两种方法有三个参数，分别是事件
的名称、要指派的函数、是否处理程序要用在冒泡或捕获阶段，第三个参数设置为true或者false分别表示要用在捕获或者冒泡阶段。

语法：
[object].addEventListener("事件名称",函数名,bCaptrue);
[object].removeEventListener("事件名称",函数名,bCaptrue);
注意这里的第一个参数是事件的名称，就不能加上on了。
例如：
var 0div=document.getElementById("div1");
0div.addEventListener("click",fnclick,false);
兼容性问题的解决
例如：

if(document.addEventListener){ //DOM
0div.addEventListener("click",fnclick1,true);
0div.addEventListener("click",fnclick2,true);
}
else if(document.attachEvent){ //IE
0div.attachEvent("click",fnclick1);
0div.attachEvent("click",fnclick2);
}

2.图片放大镜 关键代码分析
一：捕获一个事件并定义
var obj=ev.target||ev.srcElement;
/*事件流：移动鼠标到imgs区域会创建一个事件；
用ev.target又可以委托一个事件，自动捕获*/
二：获取字符串并操作,返回的也仅仅是字符串，并没有改变图片的路径
var objimg=obj.src.substring(obj.src.lastIndexOf("/")).replace("1","2");
/*注意这一行的写法*/
leftdiv.innerHTML="<img src=‘imgs/"+objimg+"‘/>" /*
注意这一行的写法*/
三：之前已经在document里找到了rightdiv###
var imgobj=rightdiv.getElementsByTagName("img")[0];
/*这里的rightdiv为什么不能写成document；
这种获取元素的方法前面有遇到过吗*/
四：鼠标移动引起事件 导致imgobj这个对象的absolute的position位置的 改变，用绝对定位是为了不影响其他的元素
imgobj.style.top=-oy/this.offsetHeight*(imgobj.offsetHeight-rightdiv.offsetHeight)+"px";
};
/* 算法：[图片的宽度减去rightdiv的宽度(极限宽度）]
乘以[ev.offsetX（鼠标水平位置）相对于leftdiv宽度的比例]
等于[图片需要向左方向移动的距离]*/
/* 垂直方向同理*/
五：div的展示属性为隐藏或显示
rightdiv.style.display="none";
rightdiv.style.display="block";
六：前一个方法已经对rightdiv有了一次操作，如果不加后面的操作无法执行
leftdiv.onmouseover=function(e){。。。。。。
var ev=e||window.event;
var obj=ev.target||ev.srcElement;
var objimg=obj.src.substring(obj.src.lastIndexOf("/")).replace("2","3");
rightdiv.innerHTML="<img src=‘imgs/"+objimg+"‘/>";
rightdiv.style.display="block";
var imgobj=rightdiv.getElementsByTagName("img")[0]; /*这里的rightdiv为什么不能写成document；这种获取元素的方法前面有遇到过吗*/
imgobj.style.position="absolute";
imgobj.style.top=0;
imgobj.style.left=0;
this.onmousemove=function(e){ /* 为什么这里要另外加一个事件*/

2015.09.23

标签：

原文地址：http://www.cnblogs.com/zhaoyongblog/p/4833457.html