【javascript】事件对象

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

1、DOM中的事件对象

兼容DOM 的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或DOM2 级），都会传入event 对象。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
    alert(event.type); //"click"
}, false);

在通过HTML 特性指定事件处理程序时，变量event 中保存着event 对象。

<input type="button" value="Click Me" onclick="alert(event.type)"/>

event 对象包含与创建它的特定事件有关的属性和方法，详见：HTML DOM Event 对象
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

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

/**如果事件处理程序存在于按钮的父节点中（例如document.body），那么这些值是
不相同的。**/
document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};

在需要通过一个函数处理多个事件时，可以使用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;

要阻止特定事件的默认行为，可以使用preventDefault()方法。

/**阻止链接导航的默认行为**/
var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

只有cancelable 属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
stopPropagation()方法用于立即停止事件在DOM 层次中的传播，即取消进一步的事件
捕获或冒泡。

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

事件对象的eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。
如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1；如果事件处理程序处于目标对象上，则event-Phase 等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase 等于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 对象就会被销毁。

2、IE中的事件对象

要访问IE 中的event 对象有几种不同的方式，取决于指定事件处理程序的方法。
在使用DOM0 级方法添加事件处理程序时，event 对象作为window 对象的一个属性存在。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    var event = window.event;
    alert(event.type); //"click"
};

如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
    alert(event.type); //"click"
});

如果是通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问event对象。

<input type="button" value="Click Me" onclick="alert(event.type)">

event的returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue 设置为false，就可以阻止默认行为。

var link = document.getElementById("myLink");
link.onclick = function(){
    window.event.returnValue = false;
};

cancelBubble 属性与DOM中的stopPropagation()方法作用相同，用来停止事件冒泡。

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

3、跨浏览器的事件对象

虽然DOM 和IE 中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。

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

//getTarget()它返回事件的目标
btn.onclick = function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
};

//preventDefault()，用于取消事件的默认行为。
var link = document.getElementById("myLink");
link.onclick = function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
};

//stopPropagation(),停止事件冒泡

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

好好学习

【javascript】事件对象

推荐阅读更多精彩内容