js--事件--事件对象

关于事件写了一系列文章
1.事件流（事件捕获和事件冒泡）
http://blog.csdn.net/github_34514750/article/details/53067077
2.事件处理程序
http://blog.csdn.net/github_34514750/article/details/53083973
3.事件对象
本文介绍事件对象
4.通用的事件侦听器函数
http://blog.csdn.net/github_34514750/article/details/53084034
5.事件循环（event loop）
http://blog.csdn.net/github_34514750/article/details/53067106
6.事件代理（(event delegation）
http://blog.csdn.net/github_34514750/article/details/53067133

1.事件对象

触发DOM上的某个对象时，会产生一个事件对象event

DOM0级事件对象

无论指定事件处理程序时使用什么方法(DOM0级和DOM2级)，都传入event对象

阻止特定事件的默认行为，就是使用preventDefault();

阻止进一步事件的事件捕获或冒泡，就是使用stopPropagation()

IE中的事件对象

目标：srcElement

阻止特定事件的默认行为，就是使用returnValue

阻止进一步事件的事件捕获或冒泡，就是使用cancelBubble

跨浏览器的事件对象

var EventUtil = {

    //根据情况分别获取DOM或者IE中的事件对象，事件目标，阻止事件的默认行为
    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;
        }
    },

    //根据情况分别取消DOM或者IE中事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

var btn = document.getElementById("myBtn");

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