JavaScript事件(Event)

一、事件流

1、事件冒泡

  事件沿DOM树向上传播

2、事件捕获

  事件到达预定目标之前被捕获

3、DMO2级事件

  事件捕获阶段，处于目标阶段，事件冒泡阶段

二、事件处理程序

格式：on +　＂事件名＂

1、HTML事件处理程序

<input type="button" value="click me" onclick="showMessage()" >

 

2、DOM0级事件处理程序

element.onclick = function(){ //... }

3、DOM2级事件处理程序

element.addEventListener(type,handle,boolean);
element.removeEventListener(type,handle,boolean);

4、IE事件处理程序(ie9以下版本)

element.attachEvent("on" + type,handle);
element.detachEvent("on" + type,handle);

【注：此时事件处理函数的作用域为全局作用域，this等于window】



三、事件对象

1、DOM(DOM0或DOM2级)中的事件对象

a、事件对象(event)作为参数传入于事件处理程序中
b、对象this,currentTarget,target之间的关系

对象this始终等于currentTarget
当事件处于捕获或冒泡阶段时，三者不相等
当事件处于目标阶段时，三者相等

c、preventDefault()与stopPropagation()
preventDefault(): 取消事件默认行为
stopPropagation()： 阻止事件的捕获和冒泡


2、IE中的事件对象(ie9以下版本)

a、通过window.event来访问事件对象，在使用attach添加事件时，也可以作为参数传入
b、cancelBubble设置为true时，取消事件冒泡
c、returnValue设置为false时，取消事件的默认行为
d、srcElement与DOM中的target属性相同



四、跨浏览器的事件对象

var EventUtil = {
    addHandler: function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent( "on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    getEvent: function(e){
        return e ? e : window.event;
    },
    getTarget: function(e){
        e = this.getEvent(e);
        return e.target || e.srcElement;
    },
    getRelatedTarget: function(e){
        e = this.getEvent(e);
        if(e.relatedTarget){
            return e.relatedTarget;    
        }else if(e.fromTarget){
            return e.fromTarget;    
        }else if(e.toTarget){
            return e.toTarget;
        }else{
            return null;
        }
    },
    stopPropagation: function(e){
        e = this.getEvent(e);
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    },
    preventDefault: function(e){
        e = this.getEvent(e);
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent( "on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

 

五、事件委托

事件委托: 就是利用事件冒泡，把事件注册到目标元素的更高层级元素上，用来减少页面事件处理程序，提高页面性能

如：HTML

<ul id="ul">
    <li id="li1"></li>
    <li id="li2"></li>
    <li id="li3"></li>
</ul>

JavaScript

var ul = document.getElementById("ul");
EventUtil.addHandler(ul,"click",function(e){
    var target = EventUtil.getTarget(e);
    switch(target.id){
        case "li1":
        console.log(target.id);
        break;
        
        case "li2":
        console.log(target.id);
        break;
        
        case "li3":
        console.log(target.id);
        break;
    }
});

 

六、命名空间(对象)中的变量访问

命名空间中的变量可以直接访问全局中的变量，但是不能访问其他(函数)作用域中的变量，只能通过传递参数来访问

1、错误代码:

obj = {
    method: function(){
        console.log(arg);
    }
}
function fn(arg){
    obj.method();
}
fn("test"); //arg is not defined

不能直接访问其他作用域中的变量


2、访问全局变量：

var arg = "test";
var obj = {
    method: function(){
        console.log(arg);  //可以直接访问全局变量arg
    }
}
obj.method(); //test

3、传递参数来访问变量:

var obj = {
    method: function(arg){ //通过传递参数来访问其他函数中的变量
        console.log(arg);
    }
}
function fn(arg){
    obj.method(arg);
}
fn("test"); //test