js中的事件:

事件驱动:

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);

    }