js的各种事件

 1. click事件：当单击一个元素时触发该事件。

<button id="btn">点击按钮</button>

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert("您点击了按钮！");
});

2. mouseover事件：当鼠标指针移动到一个元素上时触发该事件。
实例：

<div id="box"></div>

var box = document.getElementById("box");
box.addEventListener("mouseover", function(){
  this.style.backgroundColor = "red";
});

3. keydown事件：当按下一个键盘按键时触发该事件。
实例：

<input type="text" id="input">

var input = document.getElementById("input");
input.addEventListener("keydown", function(event){
  console.log("您按下了键：" + event.key);
});

4. load事件：当文档或图片加载完成时触发该事件。
实例：


<img src="image.jpg" id="img">

var img = document.getElementById("img");
img.addEventListener("load", function(){
  console.log("图片加载完成");
});

5. scroll事件：当滚动条滚动时触发该事件。
实例：

<div id="box" style="height:500px;overflow-y:auto;"></div>

var box = document.getElementById("box");
box.addEventListener("scroll", function(){
  console.log("滚动条已滚动");
});

6. submit事件：当提交一个表单时触发该事件。
实例：

<form id="form">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

var form = document.getElementById("form");
form.addEventListener("submit", function(event){
  event.preventDefault();
  console.log("表单已提交");
});

7. touchstart事件：当触摸屏幕时触发该事件。
实例：

<div id="box"></div>

var box = document.getElementById("box");
box.addEventListener("touchstart", function(event){
  console.log("您触摸了屏幕");
});

8. contextmenu事件：当右击一个元素时触发该事件。
实例：

<div id="box"></div>

var box = document.getElementById("box");
box.addEventListener("contextmenu", function(event){
  event.preventDefault();
  console.log("您右击了元素");
});=