常见的鼠标事件

常见的鼠标事件有：单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。
为了方便，我是引入jQuery库进行操作的。

1、单击

写法1：直接使用

<p onclick="alert("单击");">单击</p>

写法2：js调用

<p>单击</p>
<script>
$('p').click(function () {
    alert("单击");
  });
</script>

写法3：封装函数

<p onclick="dianji()">单击</p>
<script>
function dianji(){
alert("单击");
}
</script>

2、双击

写法1：

<p ondblclick="alert("双击显示的");">双击</p>

写法2：

<p>双击</p>
<script>
$('p').dblclick(function () {
    alert("双击");
  });
</script>

写法3：

<p ondblclick="dianji()">双击</p>
<script>
function dianji(){
alert("双击");
}
</script>

3、鼠标移动上去

写法1：

<p onmousemove="alert("鼠标移动上去");">鼠标移动上去</p>

写法2：

<p>鼠标移动上去</p>
<script>
$('p').mousemove(function () {
    alert("鼠标移动上去");
  });
</script>

写法3：

<p onmousemove="dianji()">鼠标移动上去</p>
<script>
function dianji(){
alert("鼠标移动上去");
}
</script>

4、鼠标离开

写法1：

<p onmouseout="alert("鼠标离开");">鼠标离开</p>

写法2：

<p>鼠标离开</p>
<script>
$('p').mouseout(function () {
    alert("鼠标离开");
  });
</script>

写法3：

<p onmouseout="dianji()">鼠标离开</p>
<script>
function dianji(){
alert("鼠标离开");
}
</script>

5、鼠标按下

写法1：

<p onmousedownt="alert("鼠标按下");">鼠标按下</p>

写法2：

<p>鼠标按下</p>
<script>
$('p').mousedown(function () {
    alert("鼠标按下");
  });
</script>

写法3：

<p onmousedown="dianji()">鼠标按下</p>
<script>
function dianji(){
alert("鼠标按下");
}
</script>

6、鼠标松开

写法1：

<p onmouseup="alert("鼠标松开");">鼠标松开</p>

写法2：

<p>鼠标松开</p>
<script>
$('p').mouseup(function () {
    alert("鼠标松开");
  });
</script>

写法3：

<p onmouseup="dianji()">鼠标松开</p>
<script>
function dianji(){
alert("鼠标松开");
}
</script>

7、获取焦点

写法1：

<input type="text" onfocus="alert("获取焦点");" >

写法2：

<input type="text">
$('input').focus(function () {
      alert("获取焦点");
  });

写法3：

<input type="text" onfocus="jiandian()" >
function jiandian() {
        alert("获取焦点");
    }

8、失去焦点

写法1：

<input type="text" onblur="alert("失去焦点");" >

写法2：

<input type="text">
$('input').blur(function () {
      alert("失去焦点");
  });

写法3：

<input type="text" onfocus="jiandian()" >
function jiandian() {
        alert("失去焦点");
    }

附件：点击 jQuery v3.3.1 复制保存或直接连接网络版本：

<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>