在回调 function 中优雅地检测事件 Object 的存在（和类型）或不存在

Question

我有一个 function 我打算在几个不同的Events上触发。

重要的是，function也可以直接调用。

但我需要 function 来了解它被触发的事件......或者它是否被直接调用。

我意识到我可以（以某种方式）利用Event Object并使用类似的东西：

const myFunction = (e) => {

  if ((e !== undefined) && (e.hasOwnProperty('type')) {

    switch (e.type) {

      case ('click') : console.log('Click Event'); break;
      case ('mouseover') : console.log('Mouseover Event'); break;
    }
  }

  else {

    console.log('Separately invoked');
  }
}

这并不可怕，但它比我想要的更冗长，而且我不太热衷于通过检查e是否既不是undefined的并且具有特定属性来验证Event Object ......这一切似乎都是非常迂回的方法来验证Event Object的存在。

有没有更好的方法来检查Event Object的 [存在和类型] 或 [不存在] 吗？

Answer 1

您可以使用可选链接和无效合并来获取直接调用的类型或"direct" ：

const myFunction = (e) => {
    switch (e?.type ?? "direct") {
        case "click":
            console.log("Click Event");
            break;
        case "mouseover":
            console.log("Mouseover Event");
            break;
        case "direct":
            console.log("Separately invoked");
            break;
        default:
            console.log("Other");
            break;
    }
};

使用您的内联case格式：

const myFunction = (e) => {
    switch (e?.type ?? "direct") {
        case "click":     console.log("Click Event");        break;
        case "mouseover": console.log("Mouseover Event");    break;
        case "direct":    console.log("Separately invoked"); break;
        default:          console.log("Other");              break;
    }
};

或者没有那些相对较新的特性，逻辑&&和|| ：

const myFunction = (e) => {
    switch ((e && e.type) || "direct") {
        // ...
    }
};

Answer 2

有没有更好的方法来检查Event Object的 [存在和类型] 或 [不存在] 吗？

事实证明是有的。

ES2020引入了Optional Chaining ，使用操作符?. 如果无法找到链中的任何属性- 甚至是父 object - ，它在任何时候都会返回undefined 。

这意味着在任何

const myFunction = (e) => { [... CODE HERE... ] }

我们可以使用这个：

e?.type

返回：

• EventObject.type ，如果 function 参数e是Event Object
• undefined ，如果 function 参数e是 object / 数据结构缺少属性type
• undefined ，如果在没有任何参数的情况下调用了 function

---

工作示例：

 const myDiv = document.querySelector('.myDiv'); const myFunction = (e) => { switch (e?.type) { case ('click'): console.log('Click Event'); break; case ('mouseover'): console.log('Mouseover Event'); break; default: console.log('Separately invoked'); } } setInterval(myFunction, 3000); myDiv.addEventListener('mouseover', myFunction, false); myDiv.addEventListener('click', myFunction, false);

 .myDiv { width: 100px; height: 100px; background-color: rgb(255, 0, 0); }

 <div class="myDiv"></div>

---

延伸阅读：

• https://javascript.info/optional-chaining
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining