javascript事件回调参数

const ele = document.getElementById("id");
function haha(abc) {
  console.log(abc);
  console.log(event);
}

// 声明一个参数，则该参数为事件，同时也可以使用默认事件变量event
ele.addEventListener(
  "click",
  (e) => {
    console.log(e); // event
    console.log(event); // event
  },
  true,
);

// 不声明参数，则默认传入event
ele.addEventListener(
  "click",
  () => {
    console.log(event); // event
  },
  true,
);

// 声明一个命名函数，也是同样道理
ele.addEventListener(
  "click",
  function haha() {
    console.log(event); // event
  },
  true,
);

ele.addEventListener(
  "click",
  function haha(abc) {
    console.log(abc); // event
    console.log(event); // event
  },
  true,
);

ele.addEventListener("click", haha); // event event

// 相当于页面加载时直接执行haha函数，并不是在点击时调用，此时event一定为undefined，参数abc根据是否传入而定，若不传则为undefined，否则为传入的值本身。
ele.addEventListener("click", haha()); // undefined undefined

function haha(abc) {
  console.log(abc);
  console.log(event);
}

<!-- 不传参数时可以取到默认的event， -->
<div onclick="haha()"></div>
<!-- undefined event -->

<!-- 传了参数可以取到参数与默认的event -->
<div onclick="haha('haha')"></div>
<!-- haha event -->

// 声明形参event
function haha(abc, event) {
  console.log(abc);
  console.log(event);
}

<!-- 不传参数时无法取到默认的event， -->
<div onclick="haha()"></div>
<!-- undefined undefined -->

<!-- 传了参数可以取到参数与event -->
<div onclick="haha('haha', event)"></div>
<!-- haha event -->