原生javascript案例(js原生事件有哪些)

原生JavaScript事件是指在网页中使用JavaScript代码来处理用户操作或其他事件的行为。JavaScript提供了多种原生事件，可以通过事件监听器来触发和处理这些事件。

1. 点击事件（click）：当用户点击某个元素时触发。可以通过addEventListener方法来添加点击事件的监听器。

document.getElementById("myButton").addEventListener("click", function() {
  // 处理点击事件的代码
});

2. 鼠标移入事件（mouseover）：当鼠标移动到某个元素上方时触发。可以通过addEventListener方法来添加鼠标移入事件的监听器。

document.getElementById("myElement").addEventListener("mouseover", function() {
  // 处理鼠标移入事件的代码
});

3. 鼠标移出事件（mouseout）：当鼠标移出某个元素时触发。可以通过addEventListener方法来添加鼠标移出事件的监听器。

document.getElementById("myElement").addEventListener("mouseout", function() {
  // 处理鼠标移出事件的代码
});

4. 键盘按下事件（keydown）：当用户按下键盘上的任意一个键时触发。可以通过addEventListener方法来添加键盘按下事件的监听器。

document.addEventListener("keydown", function(event) {
  // 处理键盘按下事件的代码
});

5. 表单提交事件（submit）：当用户提交表单时触发。可以通过addEventListener方法来添加表单提交事件的监听器。

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  // 处理表单提交事件的代码
});

以上只是原生JavaScript事件的一小部分示例，还有很多其他类型的事件，比如页面加载事件（load）、窗口大小改变事件（resize）、滚动事件（scroll）等等。通过使用这些原生事件，可以为网页添加交互性和动态性，提升用户体验。

需要注意的是，在处理事件时，可以通过event对象来获取事件的相关信息，比如鼠标坐标、按下的键值等等。可以使用事件的preventDefault方法来阻止事件的默认行为，或者使用stopPropagation方法来停止事件的传播。

总结来说，原生JavaScript事件提供了丰富的选项来响应用户操作或其他事件，可以通过事件监听器来添加事件的处理代码，从而实现网页的交互效果。在实际开发中，根据具体需求选择合适的事件，并结合其他相关知识来编写相应的代码。