HTML | DOM 鼠标事件

在Web开发中，鼠标事件是经常用到的一种交互形式，可以通过一些HTML属性和DOM事件来实现鼠标事件的响应。本文将介绍HTML和DOM内置的一些常用鼠标事件。

HTML 鼠标事件

以下是常用的HTML鼠标事件：

onclick

当用户点击某个元素时触发该事件，相当于鼠标的左键单击事件。

<button onclick="alert('Clicked!')">Click me</button>

ondblclick

当用户双击某个元素时触发该事件，相当于鼠标的左键双击事件。

<button ondblclick="alert('Double clicked!')">Click me</button>

onmousedown

当用户按下鼠标按钮时触发该事件。

<button onmousedown="alert('Mouse down!')">Click me</button>

onmouseup

当用户松开鼠标按钮时触发该事件。

<button onmouseup="alert('Mouse up!')">Click me</button>

onmousemove

当用户移动鼠标时触发该事件。

<button onmousemove="alert('Mouse moved!')">Hover over me</button>

onmouseover

当用户的鼠标移到某个元素上方时触发该事件。

<button onmouseover="alert('Mouse over!')">Hover over me</button>

onmouseout

当用户的鼠标移出某个元素时触发该事件。

<button onmouseout="alert('Mouse out!')">Hover over me</button>

DOM 鼠标事件

除了HTML鼠标事件，DOM也提供了一些常用的鼠标事件。可以通过JavaScript来绑定这些事件。

以下是常用的DOM鼠标事件：

click

当用户点击某个元素时触发该事件，相当于HTML的onclick事件。

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Clicked!');
});

mousedown

当用户按下鼠标按钮时触发该事件，相当于HTML的onmousedown事件。

const button = document.querySelector('button');
button.addEventListener('mousedown', () => {
  alert('Mouse down!');
});

mouseup

当用户松开鼠标按钮时触发该事件，相当于HTML的onmouseup事件。

const button = document.querySelector('button');
button.addEventListener('mouseup', () => {
  alert('Mouse up!');
});

mousemove

当用户移动鼠标时触发该事件，相当于HTML的onmousemove事件。

const button = document.querySelector('button');
button.addEventListener('mousemove', () => {
  alert('Mouse moved!');
});

mouseover

当用户的鼠标移到某个元素上方时触发该事件，相当于HTML的onmouseover事件。

const button = document.querySelector('button');
button.addEventListener('mouseover', () => {
  alert('Mouse over!');
});

mouseout

当用户的鼠标移出某个元素时触发该事件，相当于HTML的onmouseout事件。

const button = document.querySelector('button');
button.addEventListener('mouseout', () => {
  alert('Mouse out!');
});

总结

在Web开发中，鼠标事件是很常用的交互形式，可以通过HTML和DOM提供的事件来实现鼠标事件的响应。需要注意的是，HTML和DOM提供的事件可能有些许差异，需要根据实际需求来选择使用哪种事件。