使用addEventListener绑定DOM事件时触发element.style未定义TypeError的问题求助

你的猜想只对了一半，根本不是JS为了错误检测提前执行函数，是你自己写的绑定逻辑直接导致函数在页面加载阶段就被触发执行了，和事件绑定的预期时机完全无关。
具体有几个明确的错误点：

1. 事件绑定的写法完全错误
   调用addEventListener的时候，第二个参数需要传函数引用，也就是不会立刻执行的函数本体。但你写的是increaseFontSize(this)，带了括号就等于当场执行这个函数，把函数的返回值（这个函数没有写return，返回值是undefined）当成回调绑上去。
   浏览器一执行到这行绑定代码，根本不会等你鼠标移上去，立刻就跑了一遍increaseFontSize，传进去的this是全局作用域的window对象——window本身没有style属性，所以访问element.style的时候自然是undefined，直接抛出你看到的TypeError。
2. 事件名拼写错误
   用addEventListener绑定事件时，事件名不能带on前缀，你写的onmouseover是DOM0级直接给元素属性赋值的写法，就算前面的逻辑修正了，用这个名字绑定也根本不会触发hover效果。
3. 样式赋值的小隐患
   你代码里写的element.style.font = "2.5em"会覆盖元素所有和字体相关的样式（比如字重、字体族），如果只是要改字号，单独给fontSize赋值会更稳妥。

let quest1Title = document.getElementById("p1");
let quest2Title = document.getElementById("p2");

function increaseFontSize(element) { 
    // 加个空值判断，能避免极端场景下的报错
    if (!element?.style) return;
    element.style.fontSize = "2.5em";
    console.log("hi")
}

// 正确绑定：通过事件回调拿到当前触发元素，传给目标函数
quest1Title.addEventListener('mouseover', (e) => increaseFontSize(e.currentTarget));
quest2Title.addEventListener('mouseover', (e) => increaseFontSize(e.currentTarget));

补充说明：因为你把script标签放在了body的最末尾，页面加载到脚本的时候，p1、p2两个DOM元素已经渲染完成，所以你之前获取元素的逻辑是没问题的，不需要额外加DOMContentLoaded监听。

内容的提问来源于stack exchange，提问作者ScarySneer