js中各种事件

最新推荐文章于 2024-04-25 20:29:33 发布

海涛高软

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量185

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_15267341/article/details/116233148

版权

javascript 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

第一种写法：

<div id="xxx" onmousemove="haitao()">

第二种写法：

document.getElementById("haitao").onmousemove = function() {}这种写法，注意都是小写

第三种写法：

document.getElementById("haitao").addEventListener("mousemove", mousemove); //仅在目标上移动触发

第四种写法：

$("#xxx").mousemove(function(){
    alert("hkds11122")
})

下面具体举个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="haitao" style="width:100px;height:100px;background-color: burlywood;"></div>
    <script>
        // 判断鼠标单击用的是左键还是中键还是右键， 用mousedown事件
        document.getElementById("haitao").addEventListener("mouseout", mouseout); //移入目标触发

        document.getElementById("haitao").addEventListener("mouseover", mouseover); //移出目标触发

        document.getElementById("haitao").addEventListener("mousemove", mousemove); //仅在目标上移动触发



        document.getElementById("haitao").addEventListener("click", click); //目标上点击且在目标上松开时会触发一次

        document.getElementById("haitao").addEventListener("mousedown", mousedown); //目标上按下即触发

        document.getElementById("haitao").addEventListener("mouseup", mouseup); //在目标上松开时触发，至于初始在哪按没有要求


        function mouseup() {
            console.log("mouseup");
        }

        function mousedown(e) {
            console.log("mousedown");
            if (e.button === 0) {
                console.log("点击左键了");
            } else if (e.button === 1) {
                console.log("点击中键了");
            } else if (e.button === 2) {
                console.log("点击右键了");
            }
        }


        function mousemove() {
            console.log("mousemove");
        }

        function click(e) {
            console.log("click");
        }

        function mouseover() {
            console.log("mouseover");
        }

        function mouseout() {
            console.log("mouseout");
        }
    </script>
</body>

</html>

FR：徐海涛（hunk xu)

QQ技术交流群：386476712