前面我们介绍了JS的函数操作，也同时介绍了函数的作用域的概念以及操作，这一节我们将会介绍在JS中另外一个重要的概念——JS事件。
在HTML中当我们用到JS时，JS就可以触发事件的发生。
HTML中的事件是与网页元素相关联的操作或交互，比如用户点击鼠标、键盘按键、页面加载等。
1. onClick：当元素被点击时触发。
<button onclick="myFunction()">www.dotcpp.com点击我</button>
2. onLoad：当网页加载完成时触发。
<body onload="myFunction()">
3. onKeyPress：当用户按下一个键盘键时触发。
<input type="text" onkeypress="myFunction(event)">
4. onMouseOver：当鼠标移到元素上方时触发。
<div onmouseover="myFunction()">鼠标移到我上方</div>
5. onSubmit：当用户提交表单时触发。
<form onsubmit="myFunction()"> <!-- 表单内容 --> </form>
6. onChange：当元素的值发生改变时触发，常用于 input 元素。
<input type="text" onchange="myFunction()">
以上只是一些常见的HTML事件，实际上HTML提供了更多可用的事件。您可以根据需要选择适合的事件，并将其与相应的JavaScript函数关联起来，以实现所需的交互–效果。
JavaScript中的事件是与网页元素或文档相关联的操作或交互。通过使用JavaScript，可以为特定的事件绑定处理函数，以便在事件发生时执行相应的代码。以下是一些常见的JavaScript事件：
1. click：当元素被点击时触发。
element.addEventListener('click', eventHandler);2. load：当网页或图像加载完成时触发。
window.addEventListener('load', eventHandler);3. keypress：用户按下一个键盘键时触发。
element.addEventListener('keypress', eventHandler);4. mouseover：当鼠标移到元素上方时触发。
element.addEventListener('mouseover', eventHandler);5. submit：当用户提交表单时触发。
form.addEventListener('submit', eventHandler);6. change：当表单元素的值发生改变时触发。
element.addEventListener('change', eventHandler)这只是一些常见的JavaScript事件，实际上还有很多其他事件可用。您可以根据需要选择适合的事件，并使用addEventListener方法将其与相应的事件处理函数关联起来。在事件处理函数中，您可以执行任意JavaScript代码来响应事件。
1. HTML事件属性可以直接执行JavaScript代码：
<button onclick="console.log('按钮被点击了www.dotcpp.com')">点击我www.dotcpp.com</button>2. HTML事件属性可以调用JavaScript函数：
<button onclick="myFunction()">www.dotcpp.com点击我</button>
<script>
function myFunction() {
console.log(' www.dotcpp.com按钮被点击了');
}
</script>3. 您可以为HTML元素指定自己的事件处理程序：
<button id="myButton"> www.dotcpp.com点击我</button>
<script>
Varbutton=document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(' www.dotcpp.com按钮被点击了');
});
</script>4. 您可以阻止事件的发生。例如，使用event.preventDefault()方法可以阻止表单的提交或超链接的默认跳转行为：
<form onsubmit="event.preventDefault();"> <!-- 表单内容 --> <input type="submit" value="提交"> </form>
请注意，在以上示例中，JavaScript代码在事件发生时会执行相应的操作。您可以根据具体需求选择适合的方法来执行JavaScript事件代码。
在后续 DOM 章节中你将会学到更多关于事件及事件处理程序的内容，会学习到更多有趣的知识。
本文固定URL：https://www.dotcpp.com/course/1275