html页怎么调js方法「html页面设置」
在HTML页面中调用JavaScript方法，可以通过以下几种方式实现：
（图片来源网络，侵删）
1、内联JavaScript
在HTML标签中使用onclick、onmouseover等事件属性，直接调用JavaScript函数，这种方式简单直观，但不够灵活，不推荐使用。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="showMessage()">点击我</button>
</body>
</html>
2、外部JavaScript文件
将JavaScript代码放在一个单独的文件中，然后在HTML文件中通过<script>标签引入，这种方式可以使代码更加模块化，便于维护。
创建一个名为script.js的外部JavaScript文件，内容如下：
function showMessage() {
alert("Hello, World!");
}
在HTML文件中引入该文件：
<!DOCTYPE html> <html> <head> <script src="script.js"></script> </head> <body> <button onclick="showMessage()">点击我</button> </body> </html>
3、事件监听器
在JavaScript中，可以使用addEventListener方法为HTML元素添加事件监听器，这种方式可以实现更复杂的交互效果。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
window.onload = function() {
var button = document.getElementById("myButton");
button.addEventListener("click", showMessage);
};
</script>
</head>
<body>
<button id="myButton">点击我</button>
</body>
</html>
4、DOM操作和事件委托
通过JavaScript操作DOM元素，可以为HTML元素添加事件监听器，这种方式可以实现更复杂的交互效果，同时避免事件冒泡和默认行为的影响。
示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showMessage(event) {
event.stopPropagation(); // 阻止事件冒泡和默认行为的发生
alert("Hello, World!");
}
</script>
</head>
<body>
<div id="myDiv">点击我或下面的按钮</div>
<button onclick="showMessage(event)">点击我</button>
<button onclick="showMessage(event)">点击我也行</button>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", showMessage); // 使用事件委托为div添加事件监听器，同时兼容多个按钮的点击事件处理逻辑相同的情况下，减少代码量和提高性能，但是需要注意，如果子元素的事件处理逻辑与父元素不同，则不能使用事件委托，由于事件委托是通过捕获阶段的事件处理机制实现的，因此需要设置useCapture参数为true，但是现代浏览器已经默认支持了捕获阶段的事件处理机制，因此可以省略该参数，最后需要注意的是，由于事件委托是通过事件冒泡实现的，因此需要在事件处理函数中调用stopPropagation()方法来阻止事件冒泡和默认行为的发生，否则，当用户点击子元素时，会触发两次事件处理函数，导致弹出两个警告框，而当用户点击空白区域时，也会触发一次事件处理函数，导致弹出一个警告框，这显然不是我们想要的结果，在使用事件委托时，一定要确保事件处理函数能够正确处理各种情况。
