13.3 事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息;

包括导致事件的元素,事件的类型以及其他与特定事件相关的信息;

DOM中的事件对象

event对象属性方法,太多了看书吧page374;

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this); //true
    alert(event.target === this); //true
};

document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

注意target与currentTarget的区别;

event.type;

var btn = document.getElementById("myBtn");
var handler = function (event) {
    switch (event.type) {
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
        case "mouseout":
            event.target.style.backgroundColor = "";
            break;
    }
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

stopPropagation()用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡;

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert("Clicked");
    event.stopPropagation();
};
document.body.onclick = function (event) {
    alert("Body clicked");
};

对于这个例子而言,如果不调用stopPropagation(),就会在单击按钮时出现两个警告框;

eventPhase属性表示调用事件处理程序的阶段:

1表示捕获阶段,2表示”处于目标”,3表示冒泡阶段;

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.eventPhase); //2
};
document.body.addEventListener("click", function(event){
    alert(event.eventPhase); //1
}, true);
document.body.onclick = function(event){
    alert(event.eventPhase); //3
};

只有在事件处理程序执行期间,event对象才会存在;

一旦事件处理程序执行完成,event对象就会被销毁;

IE中的事件对象

this也不始终等同于事件目标;

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(window.event.srcElement === this); //true
};
btn.attachEvent("onclick", function(event){
    alert(event.srcElement === this); //false
});

returnValue默认值为true,但将其设置为false就可以取消事件的默认行为,

与DOM中的preventDefault()方法的作用相同;

cancelBubble默认值为false,但将其设置为true就可以取消事件冒泡,

与DOM中的stopPropagation()方法作用相同,都是用来停止事件冒泡的;

由于IE不支持事件捕获,因而只能取消事件冒泡;

但stopPropagatioin()可以同时取消事件捕获和冒泡;

跨浏览器的事件对象

该来的总会来;

var EventUtil = {
    addHandler: function (element, type, handler) {
//省略的代码
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function (element, type, handler) {
//省略的代码
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

// 使用
btn.onclick = function(event){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	EventUtil.preventDefault(event);
	EventUtil.stopPropagation(event);
};

由于IE不支持事件捕获,因此这个方法在跨浏览器的情况下,也只能用来阻止事件冒泡;