事件驱动:

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.οnclick=function(e){

　　var ev=e||window.event

　　}

 

鼠标相对于浏览器的位置:

ev.ClientX(X轴)

ev.ClientY(Y轴)

 

鼠标相对于屏幕的位置:

ev.ScreenX

ev.ScreenY

 

鼠标相对于事件源的位置:

ev.offsetX

ev.offsetY

 

键盘事件:

document.οnkeydοwn=function(e){

　　}

示例:

div2.οnmοusedοwn=function(e){            var ev=e||window.event;//            事件发生时：获取到事件源的距离            var ol=ev.offsetY;            var al=ev.offsetX;                this.οnmοusemοve=function(e){                    var ev=e||window.event;                    this.style.top=ev.clientY-ol+"px";                    this.style.left=ev.clientX-al+"px";                };                this.οnmοuseup=function(){                    this.οnmοusemοve=null;                }        };

 

事件流:

冒泡型事件:从点击处向外响应事件

捕获型事件:从外向内响应事件

 

阻止事件流:

IE:ev.cancelBubble=true;

其他浏览器:ev.stopPropagation

示例:

div3.οnclick=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].οnclick=function(e){        var ev=e||window.event;        var obj=ev.target||ev.srcElement;        alert(obj.innerHTML);    }