js DOM对象中的事件—常用的鼠标事件

1.事件触发条件
2.事件源
3.事件处理程序
1、常用的鼠标事件

• 1.）onclick():鼠标单机事件。鼠标单机的时候触发。
• 2.）ondblclick()：鼠标双击事件。鼠标双击时触发。
• 3.）onmousedown()：鼠标按下事件。当鼠标按下时触发。
• 4.）onmouseup():鼠标抬起事件。当鼠标抬起触发。
• 5.）onmosemove()：鼠标移动事件。当鼠标移动时触发。
• 6.）onmoseover()：鼠标移入事件。当鼠标移入时触发。
• 7.）onmouseout()：鼠标移出事件。当鼠标移出的时候触发。
• 8.）oncontextmenu()：鼠标右击事件。鼠标右击时触发，也就是默认菜单。

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

1.）onclick():鼠标单机事件。鼠标单机的时候触发。

btn.onclick = function () {
  document.write('单击');
}

2.）ondblclick()：鼠标双击事件。鼠标双击时触发。

btn.ondblclick = function () {
  document.write('双击');
}

3.）onmousedown()：鼠标按下事件。当鼠标按下时触发。

btn.onmousedown = function () {
  document.write('单击后不抬起时显示');
}

4.）onmouseup():鼠标抬起事件。当鼠标抬起触发。

btn.onmouseup = function () {
  document.write('单击抬起后显示');
}

5.）onmosemove()：鼠标移动事件。当鼠标移动时触发。

<div id="box" style="background-color: skyblue;width: 100px;height: 100px;"></div>

var box = document.querySelector('#box');
var n = 0;
box.onmousemove = function () {
  console.log('移动鼠标就触发事件');
  n++;
  console.log(n);
}

代码演示：

6.）onmoseover()：鼠标移入事件。当鼠标移入时触发。
7.）onmouseout()：鼠标移出事件。当鼠标移出的时候触发。

<img id="pic" src="./img/1.jpg" alt="">

JavaScript

var pic = document.querySelector('#pic');
pic.onmouseover = function () {
  this.src = './img/3.jpg';
}
pic.onmouseout = function () {
  this.src = './img/1.jpg';
}

代码演示：