为什么 Logging onclick 事件在 chrome 中未定义？答案

【问题标题】：Why does Logging onclcik event turns out to be undefined in chrome?为什么 Logging onclick 事件在 chrome 中未定义？
【发布时间】：2020-05-10 16:57:19
【问题描述】：

    <ul onClick='pop()'>
    <li id="1">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    function pop(event) {
    let ul = document.getElementsByTagName('ul')[0];
    console.log(window.event); //Valid mouseEvent
    console.log(event) // Undefined
}

所以问题是为什么记录事件的结果是未定义的，而 window.event 具有有效值？浏览器 - chrome

【问题讨论】：

标签： javascript google-chrome onclick dom-events event-delegation

【解决方案1】：

以下是有效处理事件的方法。您没有将任何事件传递给pop。

function pop(event) {
  let ul = document.getElementsByTagName('ul')[0];
  console.log(window.event); //Valid mouseEvent
  console.log(event) // Undefined
}

document.getElementById("yourid").addEventListener('click', pop);

<ul id="yourid">
  <li id="1">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

【讨论】：

【解决方案2】：

因为你没有向pop 传递任何东西，所以参数的值是undefined，当函数需要一个你没有提供参数的参数时，情况总是如此。

<ul onClick='pop()'>
<!--             ^−−−− Nothing here -->

两种解决方案：

使用现代事件处理（addEventListener 等）。 Chrome（和其他浏览器）将确保始终使用事件对象调用 pop。
传递包裹在代码周围的生成函数接收到的事件：
```
<ul onClick='pop(event)'>

```
请注意，代码 sn-p 中的event 不是全局的，它是浏览器为您生成的函数的本地 event 参数，用于环绕您的代码放入一个属性。

【讨论】：