用 addEventListener 绑定 click 事件最稳妥，需确保元素已存在，推荐在 DOMContentLoaded 后操作；动态元素用事件委托；悬停交互优先 mouseenter/mouseleave；长按需 mousedown + 定时器并及时清理；箭头函数无 this，可用 e.currentTarget 替代。
怎么给元素绑定鼠标点击事件？
直接用 addEventListener 绑定 click 事件是最稳妥的方式，避免覆盖已有的 onclick 属性。注意：必须确保元素在 DOM 中已存在，否则绑定无效。
- 推荐在
DOMContentLoaded事件后操作，或把脚本放在</body>前 - 不要写成
element.onclick = handleClick()（带括号会立即执行） - 如果元素是后续动态插入的，得用事件委托，比如监听父容器的
click，再用event.target判断来源
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('my-btn');
btn.addEventListener('click', (e) => {
console.log('被点了', e.target);
});
});
鼠标移入移出该用 mouseenter 还是 mouseover？
mouseenter 和 mouseleave 不会冒泡，且只在真正进入/离开绑定元素本身时触发；mouseover/mouseout 会冒泡，还会在子元素间切换时反复触发——多数交互场景下，前者更符合直觉。
- 做下拉菜单、悬停提示等，优先选
mouseenter/mouseleave - 需要捕获子元素内部移动细节（如绘图工具），才考虑
mouseover - 两者都不能阻止默认行为，想禁用右键菜单得单独监听
contextmenu
如何让按钮按住不放持续触发动作？
浏览器原生不提供“长按持续触发”，得自己用 mousedown + 定时器模拟。关键点是：mouseup 或 mouseleave 时必须清除定时器，否则会失控。
- 别用
setInterval启动后不管，一定要存引用以便clearInterval - 加上
document.addEventListener('mouseup', ...)监听全局松开，防止鼠标移出按钮后仍运行 - 移动端还需兼容
touchstart/touchend，否则手指按住没反应
let intervalId;
btn.addEventListener('mousedown', () => {
intervalId = setInterval(() => {
counter++;
}, 100);
});
document.addEventListener('mouseup', () => {
clearInterval(intervalId);
});
为什么 addEventListener 里传箭头函数有时拿不到 this？
因为箭头函数没有自己的 this，它继承外层作用域的 this。而事件处理器中通常希望 this 指向触发事件的元素——这时得用普通函数，或显式绑定。
立即学习“Java免费学习笔记（深入）”；
- 写成
element.addEventListener('click', function(e) { console.log(this); })，this就是element - 如果用箭头函数，
this是定义时所在上下文（比如 class 的实例），不是 DOM 元素 - 也可用
e.currentTarget替代this，它始终指向绑定事件的元素，且在箭头函数里也可靠
this 绑定这三处最容易写错，尤其在组件化或频繁增删 DOM 的场景里，漏掉清理或判断条件就容易内存泄漏或行为错乱。 
