JavaScript event(事件对象)

刘孟祎
刘孟祎   发布于 2018-09-28 09:40
阅读量: 104

      在触发DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。所有浏览器都支持 event 对象,但支持方式不同。只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,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);

      这个例子中的两个事件处理程序都会弹出一个警告框,显示由 event.type 属性表示的事件类型。这 个 属 性 始 终 都 会 包 含 被 触 发 的 事 件 类 型 , 例 如 "click" ( 与 传 入 addEventListener() 和removeEventListener()中的事件类型一致)。

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

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

      以这种方式提供 event 对象,可以让 HTML 特性事件处理程序与 JavaScript 函数执行相同的操作。

      event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都会有下表列出的成员。

      在事件处理程序内部,对象 this 始终等于 currentTarget 的值,而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则 this、 currentTarget 和 target 包含相同的值。

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

      这个例子检测了 currentTarget 和 target 与 this 的值。由于 click 事件的目标是按钮,因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中(例如 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
};

      当单击这个例子中的按钮时, this 和 currentTarget 都等于 document.body,因为事件处理程序是注册到这个元素上的。然而, target 元素却等于按钮元素,因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序,结果 click 事件就冒泡到了 document.body,在那里事件才得到了处理。

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

      这个例子定义了一个名为 handler 的函数,用于处理 3 种事件:click、mouseover 和 mouseout。当单击按钮时,会出现一个与前面例子中一样的警告框。当按钮移动到按钮上面时,背景颜色应该会变成红色,而当鼠标移动出按钮的范围时,背景颜色应该会恢复为默认值。这里通过检测 event.type属性,让函数能够确定发生了什么事件,并执行相应的操作。

      要阻止特定事件的默认行为,可以使用 preventDefault()方法。例如,链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为,那么通过链接的onclick 事件处理程序可以取消它,如下面的例子所示。

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

      只有 cancelable 属性设置为 true 的事件,才可以使用 preventDefault()来取消其默认行为。另外, stopPropagation()方法用于立即停止事件在 DOM 层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用 stopPropagation(),从而避免触发注册在 document.body 上面的事件处理程序。

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

      事件对象的 eventPhase 属性,可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序,那么 eventPhase 等于 1;如果事件处理程序处于目标对象上,则 eventPhase 等于 2;在冒泡阶段调用的事件处理程序, eventPhase 等于 3。这里要注意的是,尽管“处于目标”发生在冒泡阶段,但 eventPhase 仍然一直等于 2。

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

      2、 IE中的事件对象

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

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

      在此,通过 window.event 取得了 event 对象,并检测了被触发事件的类型(IE 中的 type属性与 DOM 中的 type 属性是相同的)。但如果事件处理程序是使用 attachEvent()添加的,那么就会有一个 event 对象作为参数被传入事件处理程序函数中,如下所示。

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

      在像这样使用 attachEvent()的情况下,也可以通过 window 对象来访问 event 对象,就像使用DOM0 级方法时一样。

      如果是通过 HTML 特性指定的事件处理程序,那么还可以通过一个名叫 event 的变量来访问 event对象(与 DOM 中的事件模型相同)。再看一个例子。

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

      IE 的 event 对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的 DOM 属性和方法。与 DOM 的 event 对象一样,这些属性和方法也会因为事件类型的不同而不同,但所有事件对象都会包含下表所列的属性和方法。

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

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

      这个例子在onclick 事件处理程序中使用returnValue 达到了阻止链接默认行为的目的。与 DOM不同的是,在此没有办法确定事件是否能被取消。

      cancelBubble 属性与 DOM 中的 stopPropagation()方法作用相同,都是用来停止事件冒泡的。由于 IE 不支持事件捕获,因而只能取消事件冒泡;但 stopPropagatioin()可以同时取消事件捕获和冒泡。例如:

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

      通过在 onclick 事件处理程序中将 cancelBubble 设置为 true,就可阻止事件通过冒泡而触发document.body 中注册的事件处理程序。结果,在单击按钮之后,只会显示一个警告框。

      3、 跨浏览器的事件对象

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

      IE 中 event 对象的全部信息和方法 DOM 对象中都有,只不过实现方式不一样。不过,这种对应关系让实现两种事件模型之间的映射非常容易。

      addHandler(),它的职责是视情况分别使用 DOM0 级方法、 DOM2 级方法或 IE 方法来添加事件。这个方法属于一个名叫 EventUtil 的对象,使用这个对象来处理浏览器间的差异。 addHandler()方法接受 3 个参数:要操作的元素、事件名称和事件处理程序函数。

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

      以上代码显示,为 EventUtil 添加了 4 个新方法。第一个是 getEvent(),它返回对 event对象的引用。考虑到 IE 中事件对象的位置不同,可以使用这个方法来取得 event 对象,而不必担心指定事件处理程序的方式。

      在兼容 DOM 的浏览器中, event 变量只是简单地传入和返回。而在 IE 中, event 参数是未定义的(undefined),因此就会返回 window.event。将这一行代码添加到事件处理程序的开头,就可以确保随时都能使用 event 对象,而不必担心用户使用的是什么浏览器。

      第二个方法是 getTarget(),它返回事件的目标。在这个方法内部,会检测 event 对象的 target属性,如果存在则返回该属性的值;否则,返回 srcElement 属性的值。

      第三个方法是 preventDefault(),用于取消事件的默认行为。在传入 event 对象后,这个方法会检查是否存在 preventDefault()方法,如果存在则调用该方法。如果 preventDefault()方法不存在,则将 returnValue 设置为 false。

      以上代码可以确保在所有浏览器中单击该链接都不会打开另一个页面。首先,使用 EventUtil.getEvent()取得 event 对象,然后将其传入到 EventUtil.preventDefault()以取消默认行为。

      第四个方法是 stopPropagation(),其实现方式类似。首先尝试使用 DOM 方法阻止事件流,否则就使用 cancelBubble 属性。下面看一个例子。

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

      在此,首先使用 EventUtil.getEvent()取得了 event 对象,然后又将其传入到 EventUtil.stopPropagation()。

收藏 转发 评论