常见的鼠标事件有:单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。
为了方便,我是引入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>