javascript基础从小白到高手系列六百六十二：修饰键

虽然鼠标事件主要是通过鼠标触发的，但有时候要确定用户想实现的操作，还要考虑键盘按键的状
态。键盘上的修饰键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 事件来说，事件的主要目标是失去光
标的元素，而相关元素是获得光标的元素。来看下面的例子：

这个页面中只包含一个

元素。如果光标开始在

元素上，然后从它上面移出，则

元素上会触发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 事件处理程序。当事件触发时，就会打印出一条消息说 明鼠标从哪个元素移出，移到了哪个元素上。