为什么 Logging onclcik 事件在 chrome 中未定义?

Why does Logging onclcik event turns out to be undefined in chrome?

    <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

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

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

两种解决方案:

  1. 使用现代事件处理(addEventListener,等等)。 Chrome(和其他浏览器)将确保 pop 始终与事件对象一起调用。

  2. 通过包装在代码周围的生成函数接收的事件:

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

    请注意,该代码段中的 event 不是 全局参数,它是浏览器为您生成的函数的局部 event 参数环绕您放入属性中的代码。

以下是高效处理事件的方法。您没有将任何事件传递给 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>