html中如何调用js函数

说白了，在HTML中调用JavaScript函数有两种方式：直接在标签上写onclick和与JavaScript动态绑定addEventListener。
复杂之处在于根据场景选择正确的方法。

我们先来说说最重要的事情。
直接链接onclick虽然简单，但是我们去年做了一个电商项目，发现当页面包含很多元素时，如果直接写几十个onclick属性，HTML代码立刻就会变得一团糟。
还有一点是，这种方法会把HTML和JavaScript耦合到死。
后来发现不对劲。
当团队想要在重构过程中更改函数名称时，他们必须遍历整个 HTML 文件才能找到所有源代码。
这是一场噩梦。
还有另一个关键细节。
比如去年3 月的项目中，有一个与删除操作相关的带有onclick的按钮。
然而我忘记添加确认弹窗，直接导致用户数据被误删。
这称为陷阱。

我一开始以为动态绑定addEventListener比直接写属性更高级。
仅在去年秋天的项目中，同一个按钮必须同时监控鼠标单击和悬停。
我使用动态绑定来添加参数，然后发现事件对象 e 包含 type 和 target 等宝藏，它可以准确地告诉你触发了什么事件。
不过，请注意，去年 6 月，一位新同事以 addEventListenerN 的名义编写了 addEventListener。
结果事件爆发的时候，就被重复触发了N次。
用行话来说，这称为雪崩效应。
事实上，前面的一个小小的延迟导致后面的一切都倒塌了。

提醒一个容易陷入的陷阱：当使用动态绑定时，特别是如果addEventListener的第三个参数为false（默认），事件将会冒泡。
此时，如果父元素也有相同的事件，则可以多次触发。
建议使用 true 以避免出现气泡，除非您想要实现诸如悬停在父级也响应的效果。

我觉得addEventListener值得尝试，但是记得先定义函数再绑定，避免出现调用undefinedFunction的尴尬情况。

html 中如何调用css js

结论： CSS：首选外部文件，内联用于小型样式测试。
JS：首选外部文件，内联以实现简单逻辑。
性能：外部文件使用缓存，内联重复解析。
维护：外部文件便于团队协作和版本控制。
示例：在 HTML 结构中，CSS 使用 <link>，JS 使用 [xss_clean]，内联 JS 跳过简单逻辑。