我需要将一个函数设置为 html 元素的事件监听器

Posted 2023-03-05

【中文标题】我需要将一个函数设置为 html 元素的事件监听器

【英文标题】：I need to set a function as eventlistener for an html element

【发布时间】：2019-09-25 18:09:58

【问题描述】：

我有这个 html 代码

<div class = "select">

      <select class = "select-text">
        <option disabled selected> Select user </option>
      </select>

</div>

<button id = "oracle" class = "mdc-button"> Calculate BMI </button>

还有这个js代码

const displaySelectedUser = () => ;     
const letsCalculateBMI = () => ;     
const powerupTheUI = () => ;

在 powerupTheUI 函数中只使用 DOM 选择器

将 displaySelectedUser 设置为 html 中 div 选择类的更改 eventlistener

将letsCalculateBMI设置为#oracle按钮的点击事件监听器

我试过了

document.querySelector(".select").addEventListener("change", displaySelectedUser());     
document.querySelector("#oracle").addEventListener("click", letsCalculateBMI());

还有

let oracle = document.querySelector("#oracle");

oracle.addEventListener("click", () => 
    letsCalculateBMI();
);

但测试程序不会接受它

【参考方案1】：

您正在调用从函数返回值的函数。只是不要调用该函数。

document.querySelector(".select").addEventListener("change", displaySelectedUser);
document.querySelector("#oracle").addEventListener("click", letsCalculateBMI);

注意：如果您使用箭头函数，您将无法访问通过在事件处理程序中使用 this 而单击/更改的元素

【讨论】：

好的。那我该怎么办