正文

HTML调用JavaScript触发方法大全

/0 浏览量
0811

在 HTML 页面中，JavaScript 是一种强大的脚本语言，它允许你动态地添加交互性到网页中。以下是一些常用的方法，用于在 HTML 中调用 JavaScript 函数：

1. 使用 onclick 事件

onclick 是最常见的方法之一，用于在用户点击 HTML 元素时触发 JavaScript 函数。

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  alert('Hello World!');
}
</script>

2. 使用 JavaScript 事件监听器

现代浏览器支持使用 addEventListener 方法来添加事件监听器。

<button id="myButton">点击我</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  alert('Hello World!');
});
</script>

3. 使用 onmouseover 和 onmouseout 事件

这些事件用于在鼠标悬停或移出元素时触发 JavaScript 函数。

<div onmouseover="myFunction()" onmouseout="myOtherFunction()">鼠标悬停在这里</div>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "鼠标悬停";
}

function myOtherFunction() {
  document.getElementById("demo").innerHTML = "鼠标已移出";
}
</script>

4. 使用 onload 和 onunload 事件

onload 事件在页面或图像加载完成后触发，而 onunload 事件在用户离开页面时触发。

<body onload="myFunction()">

<script>
function myFunction() {
  alert('页面已加载！');
}
</script>

5. 使用 onchange 事件

onchange 事件在用户改变元素的值时触发。

<select id="mySelect" onchange="myFunction()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert(x);
}
</script>

6. 使用 onsubmit 事件

onsubmit 事件在表单提交时触发。

<form onsubmit="return validateForm()" action="/submit_form">

<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("姓名必须填写");
    return false;
  }
}
</script>

7. 使用 setTimeout 和 setInterval 函数

setTimeout 和 setInterval 允许你设置一个在指定时间后执行的函数。

<button onclick="myTimer()">开始计时</button>

<script>
var myVar;

function myTimer() {
  myVar = setTimeout(showTime, 1000);
}

function showTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  myVar = setTimeout(showTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

总结

以上是 HTML 中调用 JavaScript 的几种常用方法。通过这些方法，你可以为网页添加丰富的交互性，提升用户体验。

-- 展开阅读全文 --