标签：
事件驱动:
1.事件:js捕获用户的操作或页面中的一些行为
2.事件源:触发事件的对象
鼠标事件:
onclick
ondblclick
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
页面事件,撤销加载:
onbeforeunload
添加,删除事件具有兼容性:
在IE中:
添加:
obj.attachEvent("on事件","处理程序")
删除:
obj.detachEvent("on事件","方法")
谷歌等支持W3C标准的浏览器中:
添加:
obj.addEventListener("click",fn1,false);
obj.removeEventListener("click",fn1,false);
自定义对象:
var person={
name:"zhang"
age:21
}
调用:console.log(person.name)
示例:
var Event = { add:function(obj, type, foo) { if(obj.attachEvent) { obj.attachEvent("on" + type, foo); } else if(obj.addEventListener) { obj.addEventListener(type, foo, false); } else { obj["on" + type] = foo; } }, remove:function(obj, type, foo) { if(obj.detachEvent) { obj.detachEvent("on" + type, foo); } else if(obj.removeEventListener) { obj.removeEventListener(type, foo, false); } else { obj["on" + type] = null; } } };
事件对象:
bu1.onclick=function(e){
var ev=e||window.event
}
鼠标相对于浏览器的位置:
ev.ClientX(X轴)
ev.ClientY(Y轴)
鼠标相对于屏幕的位置:
ev.ScreenX
ev.ScreenY
鼠标相对于事件源的位置:
ev.offsetX
ev.offsetY
键盘事件:
document.onkeydown=function(e){
}
示例:
div2.onmousedown=function(e){ var ev=e||window.event; // 事件发生时：获取到事件源的距离 var ol=ev.offsetY; var al=ev.offsetX; this.onmousemove=function(e){ var ev=e||window.event; this.style.top=ev.clientY-ol+"px"; this.style.left=ev.clientX-al+"px"; }; this.onmouseup=function(){ this.onmousemove=null; } };
事件流:
冒泡型事件:从点击处向外响应事件
捕获型事件:从外向内响应事件
阻止事件流:
IE:ev.cancelBubble=true;
其他浏览器:ev.stopPropagation
示例:
div3.onclick=function(e){ var ev=e||window.event; console.log("我是儿子"); // 阻止冒泡事件 ev.stopPropagation();
body.addEventListener("click",function(e) { // var ev = e || window.event; // console.log("我是body"); // // 阻止捕获事件 // ev.stopPropagation(); // },true);
事件委托:
var obj=ev.target||ev.srcElement(返回点击的对象)
var ul=document.getElementsByTagName("ul"); ul[0].onclick=function(e){ var ev=e||window.event; var obj=ev.target||ev.srcElement; alert(obj.innerHTML); }
标签：
原文地址：http://www.cnblogs.com/hongxuejiao/p/4805777.html
