虽然鼠标事件主要是通过鼠标触发的,但有时候要确定用户想实现的操作,还要考虑键盘按键的状
态。键盘上的修饰键Shift、Ctrl、Alt 和Meta 经常用于修改鼠标事件的行为。DOM规定了4 个属性来表
示这几个修饰键的状态:shiftKey、ctrlKey、altKey 和metaKey。这几属性会在各自对应的修饰
键被按下时包含布尔值true,没有被按下时包含false。在鼠标事件发生的,可以通过这几个属性来
检测修饰键是否被按下。来看下面的例子,其中在click 事件发生时检测了每个修饰键的状态:
let div = document.getElementById(“myDiv”);
div.addEventListener(“click”, (event) => {
let keys = new Array();
if (event.shiftKey) {
keys.push(“shift”);
}
if (event.ctrlKey) {
keys.push(“ctrl”);
}
if (event.altKey) {
keys.push(“alt”);
}
if (event.metaKey) {
keys.push(“meta”);
}
console.log(“Keys: " + keys.join(”,"));
});
在这个例子中,onclick 事件处理程序检查了不同修饰键的状态。keys 数组中包含了在事件发生
时被按下的修饰键的名称。每个对应属性为true 的修饰键的名称都会添加到keys 中。最后,事件处
理程序会输出所有键的名称。
相关元素
对mouseover 和mouseout 事件而言,还存在与事件相关的其他元素。这两个事件都涉及从一个
元素的边界之内把光标移到另一个元素的边界之内。对mouseover 事件来说,事件的主要目标是获得
光标的元素,相关元素是失去光标的元素。类似地,对mouseout 事件来说,事件的主要目标是失去光
标的元素,而相关元素是获得光标的元素。来看下面的例子:
javascript基础从小白到高手系列一千七百六十二:修饰键
元素。如果光标开始在
元素上,然后从它上面移出,则
元素上会触发mouseout 事件,相关元素为元素。与此同时,元素上会触发mouseover 事件,相关元素是
元素。 DOM通过event 对象的relatedTarget 属性提供了相关元素的信息。这个属性只有在mouseover 和mouseout 事件发生时才包含值,其他所有事件的这个属性的值都是null。IE8 及更早版本不支持 relatedTarget 属性,但提供了其他的可以访问到相关元素的属性。在mouseover 事件触发时,IE 会提供fromElement 属性,其中包含相关元素。而在mouseout 事件触发时,IE 会提供toElement 属性,其中包含相关元素。(IE9 支持所有这些属性。)因此,可以在EventUtil 中增加一个通用的获 取相关属性的方法: var EventUtil = { // 其他代码 getRelatedTarget: function(event) { if (event.relatedTarget) { return event.relatedTarget; } else if (event.toElement) { return event.toElement; } else if (event.fromElement) { return event.fromElement; } else { return null; } }, // 其他代码 }; 与前面介绍的其他跨浏览器方法一样,这个方法同样使用特性检测来确定要返回哪个值。可以像下 面这样使用EventUtil.getRelatedTarget()方法: let div = document.getElementById("myDiv"); div.addEventListener("mouseout", (event) => { let target = event.target; let relatedTarget = EventUtil.getRelatedTarget(event); console.log( `Moused out of ${target.tagName} to ${relatedTarget.tagName}`); }); 这个例子在
元素上注册了mouseout 事件处理程序。当事件触发时,就会打印出一条消息说 明鼠标从哪个元素移出,移到了哪个元素上。